/* ==========================================================================
   Styling reset
   ========================================================================== */

	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, button {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;

}

	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }
		
		
	.clearfix { zoom: 1; }

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }


/*
 * Removes the hover color on iOS touch devices
 */
html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}


div {

}

/* ==========================================================================
   universal typography sizes and colors along with normal link styles
   ========================================================================== */


p {
	margin-bottom: 18px;
	font-size: 0.875em;
		line-height: 1.8;

	
	}
	
#contactPage p {
	margin-bottom: 0px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
    font-family: 'Mouse';
	line-height: 1;
	color: #534c48;

}
h1 {
	font-size: 4em;
	color: #3b2b20;
}

h1 span {
	display: block;
	text-transform: uppercase;
	font-size: .3em;
		    font-family: 'sinkin_sans700_bold';
			text-shadow: none;
}

#fittext3 {
	    font-family: 'sinkin_sans700_bold';
		margin-top: 20px;
		font-size: 16px;
}
.outerWrapperGreen h1, .outerWrapperTeal h1 {
	color: #FFF;
	text-shadow: 2px 2px 0 rgba(0,0,0,.25);
}


h2 {
	font-size: 3em;

	color: #3b2b20;



	}
h3 {
	font-size: 2em;

}
h4 {
	font-size: 1.5em;

}
h5 {
	font-size: 1.4em;

}
h6 {
	font-size: 1.3em;
}

.makeLarger {
	font-size: 1.75em;
}

.centerIt {
	text-align: center;
}

strong {
    font-family: 'sinkin_sans700_bold';
	font-weight: normal;
}

blockquote {
	width: 80%;
	margin: 50px auto;
	font-size: 80px;
    font-family: 'ChunkFive';
	line-height: 80px;
	color: #FFF;


}
blockquote img {
	float: right;
}

p.special {
	text-align: center;
	color: white;
	text-transform: uppercase;
	margin-bottom: 80px;
	font-family: 'sinkin_sans700_bold';
}


/* ==========================================================================
   Universal link styles
   ========================================================================== */



a {
	outline: none;
	text-decoration: none;
	color: #5C9694;
}

a:hover {
}


a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

p a {
	-webkit-transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
	-ms-transition: all .3s ease-in-out 0s;
	-o-transition: all .3s ease-in-out 0s;
	transition: all .3s ease-in-out 0s;
    font-family: 'sinkin_sans700_bold';
}
p a:hover {
	background-color: #000;
	color: #FFF;
}




/* ==========================================================================
   Basic universal styling elements
   
   Colors:   
   Creme: 	#f8f7dc rgba(248,247,220,1)
   Teal:	#5c9694 rgba(92,150,148,1)
   Green:	#c8d69a rgba(200,214,154,1)
   Gray:	#534c48 rgba(83,76,72,1)
   Brown: 	#3b2b20 rgba(59,43,42,1)
   ========================================================================== */


body {
	font-family: 'sinkin_sans400_regular';
	font-size: 1em;
	color: #2D2D2D;
	line-height: 1.5;
	background-color: #F8F7DC;
	background-image: url(../images/wallpaper.png);
}



.outerWrapper {
	width: 100%;
	float: left;
	padding: 60px 0;
	position: relative;
	clear: both;
}

.webomatic {
	/* [disabled]height: 500px; */
	background: url(../images/burstFade.jpg) white center bottom no-repeat;
	background-size: cover;

}



.outerWrapper.outerWrapperLinks {
	padding: 10px 0;
	background: #534c48;
	display: none;
}

.outerWrapper.outerWrapperLinks h5{
	color: white;
	font-size: 2em;
	padding: 10px 0;
	text-align: center;
}
.outerWrapper.firstOuterWrapper {
	padding: 0;
	margin-top: -30px;
	/* [disabled]height: 400px; */
}

.outerWrapperGreen {
	background-color: #c8d69a;

}

.outerWrapperWhoop {
	background: url(../images/whoop.jpg) center center no-repeat white;
	min-height: 450px;
}

.outerWrapperDark {
	background-color:#262626;

}

.chromeBar {
	position: absolute;

	left: 0;
	height: 8px;
	width: 100%;
	background: #bababa;
background: -moz-linear-gradient(top,  #bababa 2%, #f7f7f7 50%, #7a7a7a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#bababa), color-stop(50%,#f7f7f7), color-stop(100%,#7a7a7a));
background: -webkit-linear-gradient(top,  #bababa 2%,#f7f7f7 50%,#7a7a7a 100%);
background: -o-linear-gradient(top,  #bababa 2%,#f7f7f7 50%,#7a7a7a 100%);
background: -ms-linear-gradient(top,  #bababa 2%,#f7f7f7 50%,#7a7a7a 100%);
background: linear-gradient(to bottom,  #bababa 2%,#f7f7f7 50%,#7a7a7a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#7a7a7a',GradientType=0 );

		
}

.chromeBarBottom {
	bottom: -4px;
}

.chromeBarTop {
	top:-4px;	
}
/*
.outerWrapperGreen:before {
	content: '';
	position: absolute;
	height: 50px;
	width: 100%;
	background: url(../images/greenWedge.png) left top no-repeat;
	position: absolute;
	top: -50px;
	left: 0;
}


.outerWrapperGreen:after {
	content: '';
	position: absolute;
	height: 50px;
	width: 100%;
	background: url(../images/greenWedgeBottom.png) left top no-repeat;
	position: absolute;
	bottom: -50px;
	left: 0;
}
*/

.outerWrapperGreenLight {
	background-color: #DCE5BF;
}

.outerWrapperOrange {
	background-color: #F5F3CC;
}

.outerWrapperPink {
	background-color: #DED0D0;

}
.outerWrapperTeal {
	background-color: #5C9694;
}
.outerWrapperGray {
	background-color: #D1D1D1;
}

.outerWhite {
	background-color: #f8f7dc;
}




.outerWrapper.firstOuterWrapper.outerWhite, .outerWrapper.firstOuterWrapper.outerWhiteWhite {
	padding-top: 80px;
	height: auto;

}

.outerWrapper.firstOuterWrapper.outerSpecial {
	padding: 80px 0 40px 0;
}

.outerScience {
	background: url(../images/scienceLab.jpg) 60% bottom no-repeat;
	height: 500px;
	padding: 0;

}



.outerWrapperWhite {
	background-color: #ffffff;
}

.outerWrapperGarden {
	/* [disabled]background: #FFFFFF url(../images/retroWallpaper.png) center bottom repeat; */
}

.outerWrapperSpace {
background: #0c272b url(../images/starField.jpg) repeat-x; 

}

.outerWrapperOldPhoto {
background: #fff ;

min-height: 300px; 

}

.outerWrapperOldPhoto img {
	width: 50%;
	float: right;
	height: auto;
}

#photoText {
	width: 46%;
	padding: 15% 2% 2% 2%;
	float: right;
}

.outerWrapperForm {
	margin-top: -30px;
	padding-bottom: 100px;
	background: url(../images/rocketBackground.jpg) center bottom no-repeat white;




}

.outerWrapperForm .wrapper {



}

.outerWrapperVideo {
	background: #FFF url(../images/hollywood.jpg) no-repeat center top; 
	background-size:cover;
}

#curtainLeft {
	width: 233px;
	height: 450px;
	background:url(../images/curtainLeft.png);
	position: absolute;
	bottom: 0;
	left: 0;
}

#curtainRight {
	width: 205px;
	height: 450px;
	background:url(../images/curtainRight.png);
	position: absolute;
	bottom: 0;
	right: 0;
}

#cornerPlanet {
	width: 118px;
	height: 63px;
	background:url(../images/cornerPlanet.png);
	position: absolute;
	top: 150px;
	left:20px;
}

#popCornGuys{
	width: 150px;
	height: 112px;
	background:url(../images/popCornGuys.png);
	position: absolute;
	bottom: -40px;
	left: 350px;
	z-index: 1103;
}

.outerWrapperAbout {
background:url(../images/bgCityClouds.jpg) repeat-x center bottom #D2E3EB; 
}

.outerWrapperPortfolio {
	background-color: #C8D69A;
}

.outerWrapperCity {
background: #FFF url(../images/bgCityLight.jpg) repeat-x center bottom; 

}

.outerWrapperCity .wrapper{
	height: auto;
}

.outerWrapperVideoPackages {
		background: #0c272b url(../images/starField.jpg) repeat-x; 
}

.outerWrapperVideoSubscriptions {
		background:url(../images/tealFilm.jpg)  left bottom no-repeat;
		background-size: cover;
}

.outerWrapperHalftone {
	background-image: url(../images/halfTone.png);
	background-repeat:repeat-x;
	background-position:left top;
}

.outerWrapperPattern {
	background-image: url(../images/retroPattern.png);
	background-repeat:repeat;
	background-position:left top;
}
.outerWrapperStarburst {
	background-image: url(../images/starBurst.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size: cover;
}


.outerWrapperAtoms {
	background-image:url(../images/atomsWallpaper.png);
}
.outerWrapperAtomsWhite {
	background-image:url(../images/atomsWallpaperWhite.png);
}

.outerWrapperFilm {
	background-image:url(../images/greenFilm.jpg);
	background-size: cover;
	background-position: center top;
	background-repeat:no-repeat;
}

/* wrapper class around all elements to control master width of each section
	a separate one around the nav, main content, footer etc... */

.wrapper{
	max-width: 1360px;
	padding-right: 5%;
	padding-left: 5%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	position:relative;
	}
	
.wrapper.wrapperLimit {
	max-width: 1000px;	
}
	
.wrapperSkyline {
	background-image: url(../images/footerSkyline.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	padding: 20px 0;
}

/* solves the float clearing problem - apply a class of clearfix to divs with floated elements to get them to size properly */



.wrapper:after {
    clear: both;
}
.wrapper:before, .wrapper:after {
    content: "";
    display: table;
}



.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

#mobileRow {
	display: none;
}

#mobileRow img {
	display: block;
	margin: 16px auto;
	max-width: 100%;
	width: auto;
}

#topVideoZone {
	float: left;
	width: 100%;
	position:relative;
	padding: 50px 0 0 0;
}


#packagesVideoWrap, #designSVG {
	width: 60%;
	float: left;
	box-sizing:border-box;
	padding: 10px;
	display: table;
	margin-top: 20px;
	max-width: 700px;


}

#designSVG {
	    font-family: 'Mouse';

}

#designSVG img {
	   width:80%;
	   margin: 40px 10%;
}

#packagesVideo {
	width: 100%;
	display: table-cell;
	vertical-align:middle;
	position: relative;
}



#arrows {
	width: 207px;
	height: 74px;
	padding: 60px 0;
	background: url(../images/postIt.png);
	position: absolute;	
	bottom: -150px;
	right: 0;
	z-index: 450;
	text-align: center;
}

#arrows p {
	margin-bottom: 3px;
	line-height: 1.2;
	font-size: 16px;
    font-family: 'sinkin_sans700_bold';
}

#webomatic {
	width: 36%;
	float: left;
	min-height: 200px;
	box-sizing: border-box;
	padding: 10px;
	position: relative;
	
}

#bodyWebMaintenance #webomatic {
	float: right;
}

#bodyWebMaintenance #packagesVideoWrap {
	float: left;
}

#webomatic img {
	max-width: 100%;
	width: auto;
	margin: auto;
	display: block;
	position: relative;
	top: 50px;
	z-index: 400;
}
#topVideo {
	float: right;
	width: 640px;
	height: auto;
	margin-top: 30px ;
	margin-bottom: 30px ;

}
#contentVideo {
		width: 640px;
	height: 320px;
	margin: 20px auto;
	display: block;
	clear: both;
}

#topRetro {
	width: 400px;
	position: absolute;
	background-position: center bottom;
	height: 400px;
	background-repeat:no-repeat;
	background-size: contain;

	z-index: 1011;
	left: 30px;



}

.topRetroWebDesign {
		background-image:url(../images/scienceTopper.png);
			bottom: -30px;
}

.topRetroAbout {
	background-image: url(../images/aboutTopper2.png);
	bottom: -30px;
}

.topRetroPortfolio {
	background-image: url(../images/topperPortfolio.png);

}
.topRetroMarketing {
		background-image:url(../images/topperMarketing.png);
			bottom: 0px;
}
.topRetroVideoProduction {
		background-image:url(../images/topperVideo.png);
			bottom: 0px;
}

.topRetroWebMaintenance {
	background-image: url(../images/maintenanceTopper.png);
	bottom: 10px;
}

.topRetroWebPackages {
	background-image: url(../images/topperWebPackages.png);
	bottom: 0;
}

.topRetroVideoPackages {
		background-image:url(../images/topperVideoPackages.png);
			bottom: -20px;
}

.topRetroVideoSubscriptions {
		background-image:url(../images/topperVideoSubscriptions.png);
			
}


#maintenanceTopWrap {
	box-sizing: border-box;
	display: table;
	padding: 0 0 20px 400px;
	margin: 0 auto -40px auto;
	height: 500px;
	width: 100%;
	max-width: 1000px;
	background: url(../images/cleaningWoman2.png) left bottom no-repeat;
	position:relative;
	z-index: 502;
	
	
}

#webDesignTopWrap {
	box-sizing: border-box;
	float: left;
	display: table;
	margin:auto;
	height: 500px;
	width: 40%;
	text-align: right;

}

.fitText {
		font-family:'Mouse';
		line-height: 1;
}

#maintenanceTopText {
	display: table-cell;
	vertical-align:middle;

}

.singlePoint {
	width: 80%;
	display: block;
	margin: 40px auto;
	text-align: center;
}

.singlePoint h2 {
	font-size: 60px;
	text-transform: capitalize;

}

.singlePoint p {
	font-size: 1.2em;
	width: 80%;
	margin: auto;
	font-family: 'sinkin_sans400_regular';
}


.sideBySide {
	width: 40%;
	padding: 0 5%;
	float: left;
	text-align:center;
}

.sideBySide h3 {
	
}

.sideBySide p {
	
}

.sideBySide img {
	display: block;
	margin: 0 auto 20px auto;
	max-width: 60%;
	width: auto;
}
.contactLearnMore {
	clear: both;
	display: block;
	text-align: center;
	width: 420px;
	height: 150px;
	margin: auto;
	cursor:pointer;

	background:url(../images/getPriceList.png);

	
	

	
}




#bottomFormZone {
	padding-top: 125px;
	background: url(../images/bottomFormCurvedText.png) no-repeat center top;
	position: relative;
	width: 732px;
	display: block;
	margin: auto;
}

#bottomFormZone, #bodyVideoSubscriptions #bottomFormZone {
	background: url(../images/bottomFormPriceList.png) no-repeat center top;
}

#bodyWebPackages #bottomFormZone, #bodyWebMaintenance #bottomFormZone{
	background: url(../images/bottomFormMeeting.png) no-repeat center top;
}


.bodyVideo #bottomFormZone {
	background: url(../images/bottomFormVideo.png) no-repeat center top;
}

.bodyHome #bottomFormZone, .bodyAbout #bottomFormZone  {
	background: url(../images/bottomFormAbout.png) no-repeat center top;
}

#ideaMan {
	height: 375px;
	width: 134px;
	background: url(../images/ideaMan.png);
	position: absolute;
	bottom: 0;
	left: 0;
}

#ideaWoman {
	height: 292px;
	width: 134px;
	background: url(../images/ideaWoman.png);
	position: absolute;
	bottom: 0;
	left: 0;
}


.categoryLink {
	width:28%;
	float: left;
	height: 80px;
	background: white;
	color: black;
	padding: 0 1.5%;
	position: relative;
	margin: 0 1%;
}

.categoryLink img{
	float: left;
	max-width: 25%;
	width: auto;
	margin-right: 10px;
}

.pageJump {
	position: absolute;
	right: 5px;
	bottom: 5px;
	padding: 5px;

}


/* ==========================================================================
   Navigation styling
   ========================================================================== */


nav {


}

.mainNavigation {}
.navButton { display: none; } /* hide the navigation button by default */

/* ==========================================================================
   Main content styles
   ========================================================================== */


#phoneBar {
	width: 100%;
	background-color: #5c9694;
	height: 54px;
	color: #f8f7dc;
	z-index: 1000;
	/* [disabled]box-shadow: 0 1px 1px 1px rgba(0,0,0,0.25); */
	background-image: url(../images/checkerBoard.png);
	background-repeat: repeat-x;
	position: relative;
	padding-bottom: 15px;
	/* [disabled]-webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,0.25); */
}






header {

}

#branding {

}


#videoArea {
	/* [disabled]background: url(../images/retroTV.png) left center no-repeat; */
	min-height: 367px;
}


/* 	==========================================================================
	Video Gallery
	========================================================================== */

 #topVideo #css-poster, .packageVideo #css-poster,  #contentVideo #css-poster {
	width: 100%;
  }


  #css-poster {
	/* [disabled]background: #000 url(../images/poster.jpg) 0 0 no-repeat; */
	background-size: 100%;
	width: 60%;
	float: right;
	margin-bottom: 15px;
}

#css-poster h2 {
	display: block;
	clear: both;
	margin-bottom: 40px;
	font-size: 1.5em;
	-o-transform: none;
	-ms-transform: none;
	-moz-transform: none;
	-webkit-transform: none;
	-transform: none;
	padding: 0px;
	text-shadow: none;
	color: #666;
	font-weight: normal;	
	
	
	
	}

.cssPosterRetro {
	background-image: url(../images/vidGalleryPlateRetro.jpg);
}

.cssPosterAbout {
	background-image: url(../images/vidGalleryPlateAbout.jpg);
}
.cssPosterContent {
	background-image: url(../images/vidGalleryPlateContent.jpg);
}
.cssPosterPackages {
	background-image: url(../images/vidGalleryPlatePackages4.jpg);
}
.cssPosterTransworld {
	background-image: url(../images/vidGalleryPlateTransworld.jpg);
}

.cssPosterSafeAccess {
	background-image: url(../images/vidGalleryPlateSafeAccess.jpg);
}
.cssPosterResponsive {
	background-image: url(../images/vidGalleryPlateResponsive.jpg);
}

.videoSampleDetails {
	display: block;
	float: left;
	width: 35%;
}
.videoSampleDetails h3 {
	font-size: 2em;
	margin-bottom: 0px;
}
.videoDescription {}
.videoSampleDetails ul  {}
.videoSampleDetails ul li {
	margin-left: 40px;
	list-style-type: square;
	font-size: .85em;
}



 /* main content area also known as div role = main */

#mainStage {
	padding-top: 20px;
	padding-bottom: 20px;
}

.stageWhite {
	background-color: #FFF;
	padding-left: 2.5%;
	padding-right: 2.5%;
}


#logo {

	width: 164px;
	height: 134px;
	top: -76px;
	left: 5%;
	position: absolute;
	z-index: 1001;	
}

#logo img {

	height: auto;
	width: auto;
}

#topPhone {
	position: fixed;
	z-index: 1004;
	padding: 20px 65px 20px 30px;
	/*background:#315655 url(../images/topPhone.png) right center no-repeat;*/
		background: #000 url(../images/topPhone.png) right center no-repeat;
	color: white;
	top: 0;
	right: 0;
	text-align: center;
	border-radius: 0 0 0 30px;
}

.smallScreenCompanyName {
	display: none;
}


#topPhone h6 {
	font-size: 36px;
		color: white;
		text-shadow: 1px 1px 1px rgba(0,0,0,.25);

}

#topPhone p {
	font-size: 18px;
		color: white;
		margin-bottom: 0;
		    font-family: 'Mouse';
			line-height: 1;
		

}



 /* set to override iPad/iPhone coloring the phone number as a link */
#topPhone h6 a {
	color: #fff;	
}


 /* typical informational page with a 2/3 column and a 1/3 column */

#largeColumn, #smallColumn {
	padding-top: 25px;
	padding-bottom: 25px;
	padding-right: 2.5%;
	padding-left: 2.5%;	
}

#largeColumn {
	float: left;
	width: 60%;
}

#smallColumn {
	float: right;
	width: 28%;
}
.column70 {
	width: 64%;
	padding: 20px 2%;
	float: left;
	}

.column30 {
	width: 26%;
	padding: 20px 2%;
	float:right;
	}
	
.column50 {
	width: 50%;
	float: right;
	box-sizing: border-box;

	height: 600px;


}

.column50.column50Table {
	display:table;
}

#homeText {
	display: table-cell;
	vertical-align:middle;


}

#homeText h1 {
	    font-family: 'sinkin_sans700_bold';
		line-height: 1.1;	

}

.column33 {
	width: 28%;
	margin-left: 4%;
	float: left;
}

.secret {
	box-sizing: border-box;
	width: 28%;
	float: left;
	padding: 20px;
	position: relative;
	margin-left: 4%;
	background: white;

				box-shadow: 0 0 0 1px rgba(0,0,0,0.34), 0 0 0 4px white;
	
}

.secret img {
	display: block;
	margin: 0 auto 20px auto;
	max-width: 50%;
	width: auto;

}

.secret h3 {
	text-align: center;
	padding-bottom: 10px;
	border-bottom: solid 1px rgba(0,0,0,0.22);
	margin-bottom: 10px;
	 font-family: 'sinkin_sans700_bold';
	 font-size:14px;
	 text-transform:uppercase;
	
}

.secret p {
	font-size: .75em;
}

.secret:after, .homeLink:after {
	position: absolute;
	bottom: -24px;
	left: 0;
	content: '';
	width: 100%;
	height: 24px;
	background: url(../images/contactShadow.png) center center no-repeat;
	background-size: contain;

}

.secretNumber {
	width: 40px;
	height: 40px;
	position: absolute;
	z-index:602;
	top: -20px;
	left: 10px;
background-color: rgba(240,163,72,1.00);

	color: white;
	text-align: center;
	line-height: 40px;
	font-size: 24px;
	font-family: 'Mouse';
	border-radius: 4px 4px 4px 50%;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.48), 0 0 0 4px rgba(248,148,30,1.00);


}

.equalColumn {
	width: 44%;
	padding: 10px 3%;
	float: left;
	}
	
	.equalColumn p{
	width: 90%;
	margin: 0 auto 18px auto;
	font-size: 13px;
	}
	
.equalColumn img {
	display: block;
	max-width: 30%;
	width: auto;
	margin: 0 auto 10px auto;
		
	}
.equalColumn h3 {
	padding-bottom: 10px;
	margin-bottom: 10px;
	text-align: center;
	border-bottom: solid 1px rgba(0,0,0,.15);


}
	
#billboardClearance {
	width: 100%;
	height: 30px;
	float: left;
}


 /* creates two columns in the #largeColumn div at larger sizes stacks to singles on mobile default set to white for visual reference */
 
.largeColumnSplit {
	width: 40%;
	float: left;
	padding: 3%;
	margin-left: 3%;
	background-color: #FFF;
	font-size: .9em;
}

.contentDivider {
	background-image: url(../images/starterContentDivider.png);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	clear: both;
	height: 100px;
	width: 100%;
	opacity: .5;	
}

#packagesLink {
	width:100%;
	display: block;
	padding-top: 100px;
	clear:both;
}

#packagesLink #priceLink {
	outline: 0;
	width: 240px;
	color: #FFF;
	background-color: #5C9694;
	padding: 20px;
	border-radius: 12px;
	margin: auto;
	display: block;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	-webkit-transition: all .2s ease-in-out 0s;
	-moz-transition: all .2s ease-in-out 0s;
	-ms-transition: all .2s ease-in-out 0s;
	-o-transition: all .2s ease-in-out 0s;
	transition: all .2s ease-in-out 0s;
	border: solid 2px #fff;
	box-shadow: inset 0 0 2px 3px rgba(0,0,0,0.15);
	position: relative;
}

#packagesLink #priceLink:hover {
	background-color: #2F5251;
}

#postLink {
	width: 150px;
	height: 150px;
	background: url(../images/postLink.png) center center no-repeat;
	background-size: contain;
	position: absolute;
	left: -120px;
	top: -60px;
	transform: rotate(-6deg);
}

#packagesLink #priceLink img {
	display: block;
	margin: auto;
}

#packagesLink #priceLink span {
	display: block;
	font-size: 24px;
	text-transform:uppercase;
	    font-family: 'sinkin_sans700_bold';
}



/* ==========================================================================
   Lists
   ========================================================================== */
 
.listBase {
	margin-bottom: 25px;
}

.listSideBySide {
	width: 50%;
	float: left;
}

.listBase li{
	margin-left: 35px;
	margin-bottom: 12px;
	margin-right: 35px;
	
}
 /* add the bullet point for a non-background image li */
.listSimpleBullets li {
	list-style-type: disc;
	
}


 /* add the image and padding for background image li */
.listImageList li {
	background-image: url(../images/starterImageList.png);
	background-repeat: no-repeat;
	background-position: left 4px;
	padding-left: 20px;
	
}

.listStripes li {
	padding: 6px;
}

.listStripes li:nth-child(odd){
	background-color: #666;
}
.listStripes li:nth-child(even){
	background-color: #EAEAEA;
}








/* ==========================================================================
   Style for testimonials
   ========================================================================== */


.testimonial {
	position: relative;
	background-color: #FFF;
	border: 8px solid #444;
	border-radius: 16px;
	-webkit-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
	padding-top: 15px;
	margin-bottom: 75px;
	display: block;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	max-width: 800px;
}


/* before and after pseudo classes add a triangle on the bottom to create a talk bubble*/

.testimonial:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 26px;
	top: 100%;
	border-top-width: 25px;
	border-right-width: 25px;
	border-bottom-width: 25px;
	border-left-width: 25px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #444;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: #444;
}
.testimonial:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 38px;
	top: 100%;
	border-top-width: 15px;
	border-right-width: 15px;
	border-bottom-width: 15px;
	border-left-width: 15px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #fff;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: #fff;
}

.testimonial p {
	padding-right: 20px;
	padding-left: 20px;
	font-size: .875em;
}

.testimonial p:first-letter {

	font-size: 30px;
}

.testimonial img {
	border-radius: 50%;
	float: right;
	margin-right: 15px;
	border: 2px solid #FFF;
}


/* adds a cursive font and right justification for the persons name in a testimonial*/
.testimonial p:last-child {
	text-align: right;
    font-family: 'halohand';
	font-size: 2.5em;
	line-height: 1.1;
	
}



/* ==========================================================================
   styles for the footer and footer navigation in columns
   ========================================================================== */

footer {
/*	background-color: #3b2b20;*/
	background-color: #231F20;
	color: #FFF;
	width: 100%;
	clear: both;
	/* [disabled]overflow: hidden; */
	padding: 20px 0 0 0;
	position: relative;

	

}


#footerMenu {

		}
		
#footerMenu a {
	margin: 0px;
	display: inline-block;
	padding: 3px 0;
	margin-left: 28px;
	text-transform: lowercase;
	position:relative;
	color: rgba(219,219,219,1.00);
		}

#footerMenu a:after {
	width: 0px;
	height: 1px;
	background-color:rgba(255,255,255,.75);
	position: absolute;
	content: '';
	bottom: 0;
	left: 50%;
	-webkit-transition: all .2s ease-in-out 0s;
	-moz-transition: all .2s ease-in-out 0s;
	-ms-transition: all .2s ease-in-out 0s;
	-o-transition: all .2s ease-in-out 0s;
	transition: all .2s ease-in-out 0s;	
}

#footerMenu a:hover:after {
	width: 100%;
	left: 0;
	height: 1px;

}
#footerMenu a:hover {
	color: #FFF;
		}
#footerMenu .footerNav {
	margin-left: 2%;
	float: left;
	font-size: .8em;
		}
.footerNav i.fa {
margin-right: 6px;
}


#footerInformation a {
    font-family: 'Mouse';

		color: #3b2b20;
	font-size: 32px;
	
}

#footerInformation p {
	line-height: 1.25;
}

#footerSecondaryInformation {
	clear: both;
	text-align: center;
	text-transform: none;
	font-size: 2em;
	padding-top: 25px;
	display: none;
    font-family: 'Lobster';
	
}
#footerMenu .footerNav h4 {
	font-size: 22px;
	color: #FFF;
	margin-bottom: 2px;
	text-transform: lowercase;
}

#footerMenu .footerNav ul {
	margin-bottom: 14px;
}

footer p {
margin-bottom: 0;	
}
/*
 * Override the phone number being styled as a link iPad/iPhone
 */
footer p a {
	color: #CCC;	
}


/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

#phoneColumn {
	float: left;
	margin-left: 20px;
	width: 230px;
	border: solid 1px rgba(215,215,215,1.00);
	background: rgba(243,243,243,1.00);
	padding: 20px;
	border-radius: 6px;
}

#phoneColumn img {
	max-width: 120px;
	display: block;
	margin: 10px auto;
	width: auto;
}

#phoneColumn p {
	margin-bottom: 0;
}

#phoneColumn h5 {

    font-family: 'sinkin_sans700_bold';
	font-size: 12px;
	margin: 12px 0 4px 0;

}


	
#contactWrap {
	width: 100%;	
	display: block;
	max-width: 700px;
	position: relative;
	margin: auto;
}





#mainForm {
	float: left;
	width: 360px;
	position: relative;
	padding: 20px; 
	background: rgba(92,150,148,1.00);
	border-radius: 6px;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
	border: solid 2px white;
}

#rocket {
	position: absolute;

	background: url(../images/contactRocket.png) center center no-repeat; 
	left: -150px;
	bottom: -30px;
	z-index:203;
	width: 150px;
	height: 300px;
}

#rocketShadow {
	position: absolute;

	background: url(../images/rocketShadow.png) center center no-repeat;
	left: -158px;
	bottom: -40px;
	z-index: 202;
	width: 115px;
	height: 48px;
}

#mainForm:after {
	content: '';
	height: 24px;
	width: 100%;
	position: absolute;
	bottom: -32px;
	left: 0;
	background: url(../images/contactShadow.png) center center no-repeat;
	background-size: contain;
	opacity: .5;
}

#mainForm h3 {
	color: white;
	font-size: 44px;
	margin-bottom: 10px;
}

#contactWrap h1 {
	margin-bottom: 20px;

}

#bottomForm {
	width: 480px;
	display: block;
	margin: auto;
}



.buttonArea {
	width: 96%;
	display: block;
	margin: auto;
}

.buttonArea button {
	margin-bottom: 10px;
}







/* nested fieldset */
#mainForm fieldset {
	border: 0;
	margin: 0;
	width: 100%;
	float: left;
}

#bodyContact #mainForm input {
	border: none;
}






#budget {
	padding: 6px;
	border-radius: 4px;
	box-shadow: none;
	border: none;

	
	}

#budget option {


	}
	
#mainForm option  {
	font-size: 1.1em;
	}
	






.requiredInfo {
	background-image: url(../images/required.png);
	background-repeat: no-repeat;
	background-position: 98% center;
}
::-moz-placeholder {color: #534c48;}

#email, #phone, #business, #website, #name, .budgetOption {
	/* [disabled]display: block; */
	clear: both;
	margin-bottom: 8px;

}






#rowForm {
	width: 340px;
	float: right;
	box-sizing: border-box;
	padding: 20px;
	border: solid 1px gray;
	background-color:rgba(92,150,148,1.00);
	color:white;
	transform-origin: center top;
	position: relative;
	border-radius: 2px;
}

#arrow {

	position: absolute;
	bottom: 20px;
	left: -230px;
	width:200px;
	height: 160px; 
}

#bodyWebPackages #rowForm {
	transform: scaleY(0)
}

#rowForm p {
	font-size: 11px;
	padding-top: 10px;
	border-top: 1px solid rgba(209,209,209,1.00);
	padding-right: 50px;
}

#rowForm label {
	display: block;
	    font-family: 'sinkin_sans700_bold';
		font-size: 11px;
		margin-bottom: 5px;
}

#rowForm input {
	padding: 12px 2%;
	color: #252525;
	font-size: 14px;
	border-radius: 6px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 96%;
	border: solid 2px rgba(0,0,0,.3);	
}

#rowForm button, #mainForm button {
	outline: 0;

	color: #FFF;
	background-color: #E59C46;
	padding: 16px;
	border-radius: 4px;
	margin: 10px auto;
	display: block;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	-webkit-transition: all .2s ease-in-out 0s;
	-moz-transition: all .2s ease-in-out 0s;
	-ms-transition: all .2s ease-in-out 0s;
	-o-transition: all .2s ease-in-out 0s;
	transition: all .2s ease-in-out 0s;
	border: solid 1px #fff;


}

#rowForm button:hover, #mainForm button:hover {

	padding: 16px 24px;
}

#rowForm button span.emphasize, #mainForm button span.emphasize {
	display: block;
	text-transform: uppercase;
		    font-family: 'sinkin_sans700_bold';
			font-size: 1.5em;
}


#mainForm p {
	font-size: 11px;
	color: white;

}
/* input field */
#mainForm input, #bottomForm input {
	padding: 12px 2%;
	color: #252525;
	font-size: 14px;
	border-radius: 6px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 96%;
	border: solid 2px rgba(0,0,0,.3);
}

#bottomForm input#verify {
	width: 40px;
	float: right;
	margin-bottom: 20px;	
}

#bottomForm p.verifyText {
	margin-bottom: 0;
	float: left;
	line-height: 40px;	
}

#mainForm input value, #bottomForm input value  {
	color: #CC0066
}
#mainForm label input, #mainForm label, #bottomForm label input, #bottomForm label  {

	color: #FFF;
	font-size: 12px;
	display: block;
	margin-bottom: 6px;
	    font-family: 'sinkin_sans700_bold';
		display: none;
}




#mainForm fieldset #comments, #bottomForm fieldset #comments   {
	width: 94%;
	padding: 5px 2%;
	height: 100px;
	border-radius: 6px;
	border: solid 1px rgba(0,0,0,.3);

}

#mainForm input:focus, bottomForm input:focus {
	color: #285958;
	background-color: #f8f7dc;
}


#mainForm input:active {
	/* [disabled]background-color: #FFF; */
}
/* button */
#bottomForm button {
	outline: 0;
	border: 1px solid #C87106;
	color: #FFF;
	background-color: #E49E4C;
	padding: 5px;
	border-radius: 4px;
	margin-top: 10px;
	cursor: pointer;
    font-family: 'Mouse';
	font-size: 24px;
	font-weight: normal;
	height: 50px;
	-webkit-transition: all .2s ease-in-out 0s;
	-moz-transition: all .2s ease-in-out 0s;
	-ms-transition: all .2s ease-in-out 0s;
	-o-transition: all .2s ease-in-out 0s;
	transition: all .2s ease-in-out 0s;
}
 #bottomForm button:hover {
	background-color: #DD8F31;
}

.thanksMessage {
	font-size: 30px;
	background-color: #FFF;
	text-align:center;
	max-width: 700px;
	margin: auto;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 0 1px 1px rgba(0,0,0,0.33);
	color: rgba(88,81,79,1.00);
}

.thanksMessage img {
	width: auto;
	display: block;
	margin: auto;
}








/* ==========================================================================
   some miscellaneous image helper classes
   ========================================================================== */

img {
	height: auto; /*needed for flex sizing on IE8 */	
}


.floatRight {
	float: right;
	margin-left: 10px;
}
.floatLeft {
	float: left;
	margin-right: 10px;
}
.clearBoth {
	clear: both;
}

.centerBlockPic {
	max-width: 100%;
	height: auto;
	width: auto;
	display: block;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}


.picSizeLimit {
	max-width: 40%;
	height: auto;
	width: auto;
}

.borderPic {
	background-color: #FFF;
	padding: 5px;
	border: 1px solid #666;
	
}

.shadowPic {
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,.5);
	
}

.roundedPic {
	border-radius: 6px;
	
}

/*  ==========================================================================
	==========================================================================
   Page specific style
   1. Home Page
   2. About Us
   3. Contact Form
   ========================================================================== */
   
   
   
/* 	==========================================================================
	1. Home page
	========================================================================== */


#whoopTextWrap {
	height: 450px;
	display: table;
	width: 45%;
	padding: 0 2% 0 10%;
	float: left;

}

#whoopText {
	text-align: right;
	vertical-align:middle;
	display:table-cell;
}


.craigCartoon, .nancyCartoon {
	background-image:url(../images/homeSprite.png);
	width: 200px;
	height: 300px;
	position: absolute;
	bottom: -75px;
	z-index: 50;
	
}

.craigCartoon {
	background-position: 0 0;
	left: -120px;
}

.nancyCartoon {
	background-position: -200px 0;
	right: -120px;
}

#homeVideoStage {
	width: 100%;

}

#homeVideo {
	width: 80%;
	height: auto;
	z-index: 49;
	margin: 40px auto;
	position: relative;
	text-align: left;
	padding: 50px 0 0 0;
}

#homeVideo h1 {
	width: 70%;
	text-transform:uppercase;
	margin: auto;	
}

#homeVideo p {
	width: 70%;
	margin: 5px auto 20px auto;
	text-align:left;
}

#homeVideo p.ownerSig {
	text-align:right;
	    font-family: 'halohand';
		font-size: 36px;
}

#homeVideo li {
	    font-family: 'Mouse';
	font-size: 24px;
	text-transform:capitalize;
}



#homeVideo img{
	width: 100%;
	height: auto;	
}

#homeLinkWrap {
	width: 100%;
	float: left;
	padding-top: 20px;	

}

.homeLink {
	width: 23%;
	float: left;
	margin: 0 1%;
	background-color: white;
	box-sizing: border-box;
	position: relative;	
	padding: 0 0 80px 0;
	border-radius: 8px;
}

.homeLinkNumber {
	width: 40px;
	height: 30px;
	border-radius: 50% 50% 0 0;
	background: rgba(35,31,32,1.00);
	line-height: 30px;
	text-align:center;
	position: absolute;
	top: -30px;
	right: 0;
	font-size: 16px;
	    font-family: 'sinkin_sans700_bold';
	 color: white;
	
}

.homeLink:before {
/*	content: url(../images/littleAntenna.png);
	position: absolute;
	top: -60px;
	right: 5%;*/
}

.homeLink img {
	max-width: 100%;
	width: auto;
	margin-bottom: 20px;
}

.homeLink p {
	margin: 0 6%;
	padding-top: 8px;
	border-top: solid 1px #D8D8D8;

	font-size: 12px;

}

.homeLink h3 {
	text-transform: uppercase;
	margin-bottom: 8px;
	color: rgba(92,150,148,1.00);
	    font-family: 'sinkin_sans700_bold';
		font-size: 14px;
			text-align:center;
}

.homeLink h3 span {

}

.homeLinkIcon {
	width: 100%;
	height: 100px;
	position: absolute;
	background-image: url(../images/homeSprite.png);
	top: -46px;
	left: 0;
	display: none;
}
/*.homeLinkIconWeb {
	background-position: center -300px;
}
.homeLinkIconVideo {
	background-position: center -400px;
}
.homeLinkIconMarketing {
	background-position: center -500px;
}
.homeLinkIconAbout {
	background-position: center -600px;
}*/





.homeLink a {
	position: absolute;
	background-color: #ef9e3f;
	width: auto;
	bottom: 10px;
	right: 10px;
	-webkit-transition: transform .3s ease-in-out 0s;
	-moz-transition: transform .3s ease-in-out 0s;
	-ms-transition: transform .3s ease-in-out 0s;
	-o-transition: transform .3s ease-in-out 0s;
	transition: transform .3s ease-in-out 0s;
	text-align: center;
	line-height: 1;
	color: white;
	padding: 14px 10px;
	font-size: 16px;
		    font-family: 'sinkin_sans700_bold';
			box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.48);
			border-radius: 4px;
	text-transform: uppercase;
}
.homeLink a span {
	display: block;
	text-transform: lowercase;
	font-size: .5em;

}

.homeLink a:hover {

	background-color: #d07c1a;

}

#homeTextWrap {
	width: 100%;
	float: left;
}

.homeText {
	width: 44%;
	padding: 10px 3%;
	float: left;

}

.homeText img {
	display: block;
	margin: 0 auto 10px auto;
	max-width: 25%;
	width: auto;

	
}

.homeText h2 {
	font-size: 42px;
	padding-bottom: 10px;
	border-bottom: solid 1px rgba(0,0,0,.2);
	margin-bottom: 10px;
	text-align: center;
	color: rgba(92,150,148,1.00);
	
}

.homeText h2 span {
	font-size: 16px;
	display: block;
	    font-family: 'sinkin_sans700_bold';
}





#homeServiceList {
	width: 300px;
	float: right;
	padding: 100px 0 60px 0;
	position:relative;
	border-radius: 150px 30px 4px 4px;
	background: #5c9694 url(../images/starBurst.png) left bottom no-repeat;


}







/* 	==========================================================================
	2. About Us and Real Bosses 
	========================================================================== */

.bossColumn {
	max-width:1000px;
	margin: auto;
	padding: 20px 0;
}
.bossBio {
	width:60%;
}

.bossBio ul li {
	margin:0 30px 10px 40px;
	list-style:disc;
    font-family: 'sinkin_sans700_bold';
	font-size: .75em;
}

.bossPic {
	width:35%;
	position: relative;
	margin-top: 50px;
}

.bossPic img {
	
		box-shadow: 0px 0px 0px 2px #999,0px 0px 0px 4px #ccc,0px 0px 0px 5px #d2d2d2,0px 0px 0px 6px #999,0px 0px 1px 8px rgba(0,0,0,.4);
	max-width: 90%;
	display: block;
	margin:auto;
	width: auto;
}


.ownerWrap {
	width: 84%;
	display: block;
	margin: auto;
}

.ownerWrapCraig .ownerBio, .ownerWrapNancy .ownerVideo  {
	float: right;
}

.ownerWrapNancy .ownerBio, .ownerWrapCraig .ownerVideo  {
	float: left;
}

#ownerCraig,#ownerNancy {
	position: absolute;
	bottom: -30px;
}

#ownerCraig {
	left: -80px;
}
#ownerNancy {
	right: -80px;
}

.ownerBio {
	width: 44%;
	width: calc(100% - 350px); 
	width: -webkit-calc(100% - 350px);
	width: -moz-calc(100% - 350px);
	position: relative;
}

.ownerVideo {
	width: 300px;
	height: 300px;
	margin-top: 50px;
	position: relative;
	background: #2a2a2a;

	box-shadow: 0px 0px 0px 2px #999,0px 0px 0px 4px #ccc,0px 0px 0px 5px #d2d2d2,0px 0px 0px 6px #999,0px 0px 1px 8px rgba(0,0,0,.4);

}

.ownerVideo:before, .bossPic:before  {
	content: url(../images/antenna.png);
	position: absolute;
	left: 25px;
	top: -75px;
}




.missionList {
	width: 42%;
	padding: 10px 4%;
	float: left;
}


.missionList li {
    font-family: 'sinkin_sans700_bold';
	padding: 8px 24px;
	margin-bottom: 10px;
	background: url(../images/retroBullet.png) no-repeat left 16px;
	font-size: 14px;
}

   
/* 	==========================================================================
	3. Before After Gallery
	========================================================================== */


.beforeAfterItem {
	width: 26%;
	float: left;
	position:relative;
	background-color: #FFF;
	margin: 0 0 36px 5.5%;
	padding: 0 0 80px 0;
	border-radius: 6px;
	overflow:hidden;
	box-shadow: inset 0 0 2px 2px rgba(0,0,0,.2), 0 0 0 1px #d6d6d6, 0 0 0 2px #9d9d9d, 0 0 0 3px #858585, 0 0 0 4px #c5c5c5, 0 0 0 5px #fff, 0 0 0 7px #dadada, 0 0 0 8px #ececec, 0 0 0 9px #979797, 0 0 0 10px #5e5e5e; 
}

.beforeAfterItem img{
	display: block;
	margin: 0 auto 16px auto;
	width: 100%;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.26);
}

.beforeAfterItem a {
	position: absolute;
	bottom: 10px;
	right: 20px;
	padding: 8px 0;
	width: 160px;
	font-size: 18px;
	
}

.beforeAfterItem a span {
	display: block;
	font-size: 12px;
}

.beforeAfterItem h4 {
	text-align:center;
	border-bottom: solid 1px #E1E1E1;
	padding-bottom: 5px;
	margin: 0 20px 12px 20px;

	
}
.beforeAfterItem p, .beforeAfterItem h5 {
	margin: 0 18px;
}

.beforeAfterItem p {
	font-size: 12px;
}


/* 	==========================================================================
	4. Web Maintenance Packages
	========================================================================== */
.packageDetails {
	width: 44%;
	float: left;
}

.packageVideo {
	width: 52%;
	float: right;
	margin-bottom: 20px;
}

.packageVideo ul {
	width: 45%;
	float: left;
}

.outerWrapperGreen .packageVideo {
	float: left;
}

.outerWrapperGreen .packageDetails {
	float: right;
}

.packageText {
	margin: 40px auto 0 auto;
	width: 80%;
	
}

.packageText h3 {
	font-size: 48px;
}



.packageLearnMore {
	background: #E3AA59;
	position: absolute;
	bottom: -42px;
	right: 12%;
	height: 30px;
	line-height: 30px;
	display: block;
	width: 70%;
	cursor:pointer;
	color: #FFF;
	padding: 6px;
	font-family: 'BebasNeueRegular';
	font-size: 1.4em;
	text-align:center;
		-webkit-transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
	-ms-transition: all .3s ease-in-out 0s;
	-o-transition: all .3s ease-in-out 0s;
	transition: all .3s ease-in-out 0s;
		border-radius: 0 0 12px 12px;
}

.packageLearnMore .fa, .videoLearnMore .fa {
	transform: rotate(-90deg);
			-webkit-transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
	-ms-transition: all .3s ease-in-out 0s;
	-o-transition: all .3s ease-in-out 0s;
	transition: all .3s ease-in-out 0s;
}

.packageLearnMore:after {
	content: '';
	width: 100%;
	height: 15px;
	background:url(../images/shadow.png) center top no-repeat;
	position: absolute;
	bottom: -15px;
	left: 0;
	background-size: contain;
}

.packageLearnMore:hover {
		background-color:#D68D24;
		width: 80%;	
		right: 7%;
}

.packageLearnMore:hover .fa, .videoLearnMore:hover .fa {
	transform: rotate(0deg);
}

#miniFormWrap {
	width: 30%;
	float: right;
	background: #534c48;
}
#post1 {
	width: 180px;
	height: 180px;
	position: absolute;
	background:url(../images/postOneA.png);
	background-size: contain;

	right: 5%;
	bottom:-100px;
	transform: scale(0,0);
	z-index: 50;
}
#post2 {
	width: 180px;
	height: 180px;
	position: absolute;
	background:url(../images/postTwo.png);
	background-size: contain;

	left: -30px;
	top:-190px;

	transform:scale(0,0)
}
#post3 {
	width: 180px;
	height: 180px;
	position: absolute;
	background:url(../images/postThree.png);
	background-size: contain;


		right: calc(5% + 360px); 
	right: -webkit-calc(5% + 360px);
	right: -moz-calc(5% + 360px);
	top:-110px;
	transform: rotate(-6deg);
		transform:scale(0,0)
}

#postToDo {
	width: 140px;
	height: 140px;
	position: absolute;
	background:url(../images/postToDo.png);
	background-size: contain;

	left: -5000px;
	top:-110px;
	transform: rotate(-6deg);

}

#miniNancy {
	position: absolute;
	bottom: -30px;
	right: -1000px;

}

#formDetails {
	display: table-cell;
	vertical-align:middle;

}

#formDetails img {
	width: 120px;
	height: 120px;
	float: right;
	margin: auto;

}

#formDetails h3 {


			font-size: 36px;
			margin-bottom: 8px;
}

#formDetails h3 span {
	display: block;
	font-size: .75em;
}

#formDetails p {
	font-size: .75em;
	line-height: 1.9;
	}



.fitFormText {
	    font-family: 'Mouse';
		line-height: 1;
		text-shadow: 1px 1px rgba(0,0,0,0.38);
}

#fitFormText2 {
	padding-bottom: 10px;
	border-bottom: solid 1px white;
	margin-bottom: 10px;
}

#formDetailsWrap {
	width: calc(90% - 350px); 
	width: -webkit-calc(90% - 350px);
	width: -moz-calc(90% - 350px);
	float: left;
	margin-left: 5%;
	display: table;
}
#packageWrap {
	position: relative;
	margin: auto;
	margin-bottom: 60px;
	width: 100%;
	max-width: 1100px;
	display: block;
	
	}
.package{
	width: 33.33%;
	margin-top: 40px;
	margin-left: 0;
	margin-bottom: 20px;
	display: inline;
	float: left;
	background: rgba(255,255,255,1.00);
	position: relative;
	padding-bottom: 40px;
	border-radius: 12px; 
	box-sizing: border-box;


	}
	
	.packageMiddle {
	z-index: 302;
	box-shadow: 0 1px 3px 3px rgba(0,0,0,0.34);
	}
	
#leftShadow {
	position: absolute;
	bottom: -36px;
	left: -90px;
	width: 90px;
	height: 260px;
	background:url(../images/leftPackageShadow.png);


}
#rightShadow {
	position: absolute;
	bottom: -36px;
	right: -90px;
	width: 90px;
	height: 260px;
	background:url(../images/rightPackageShadow.png);


}
#bottomShadow {
	position: absolute;
	bottom: -46px;

	width: 100%;
	height: 21px;
	background:url(../images/bottomPackageShadow.png) center center no-repeat;
	background-size: contain;


}
#extraBottom {
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: -30px;
	border-radius: 0 0 12px 12px;
	background: white;
		box-shadow: 0 1px 0 0 rgba(0,0,0,0.34);

}

#extraTop {
	width: 100%;
	height: 24px;
	position: absolute;
	top: -20px;
	border-radius: 12px 12px 0 0;
	background:rgba(140,69,66,1.00);
		box-shadow: 0 -1px 0 0 rgba(0,0,0,0.34);

}

#flagPole {
	width: 10px;
	height: 80px;
	position: absolute;
	top: -100px;
	left: 40px;
				transform-origin:center bottom;
			transform: scaleY(0);
background: #828282;
background: -moz-linear-gradient(left,  #828282 0%, #e2e2e2 50%, #828282 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#828282), color-stop(50%,#e2e2e2), color-stop(100%,#828282));
background: -webkit-linear-gradient(left,  #828282 0%,#e2e2e2 50%,#828282 100%);
background: -o-linear-gradient(left,  #828282 0%,#e2e2e2 50%,#828282 100%);
background: -ms-linear-gradient(left,  #828282 0%,#e2e2e2 50%,#828282 100%);
background: linear-gradient(to right,  #828282 0%,#e2e2e2 50%,#828282 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#828282', endColorstr='#828282',GradientType=1 );

}

#flagPole:before {
	content: '';
	width: 16px;
	border-radius: 50%;
	height: 16px;

	position: absolute;
	top: -14px;
	left: -3px;
background: #e5e5e5;
background: -moz-radial-gradient(center, ellipse cover,  #e5e5e5 11%, #686868 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(11%,#e5e5e5), color-stop(100%,#686868));
background: -webkit-radial-gradient(center, ellipse cover,  #e5e5e5 11%,#686868 100%);
background: -o-radial-gradient(center, ellipse cover,  #e5e5e5 11%,#686868 100%);
background: -ms-radial-gradient(center, ellipse cover,  #e5e5e5 11%,#686868 100%);
background: radial-gradient(ellipse at center,  #e5e5e5 11%,#686868 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#686868',GradientType=1 );

box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
	
}

#flag {
	position: absolute;
	top: -90px;
	left: 50px;
	height: 20px;
	padding: 5px 10px;
	background:rgba(225,165,78,1.00);
	font-size: 12px;
	text-transform: uppercase;
		    font-family: 'sinkin_sans700_bold';
			color: white;
			transform-origin:left center;
			transform: scaleX(0);

}



#flag:before {
	content:'';
	border-width: 10px;
	border-style: solid;
	border-top-color: rgba(225,165,78,1.00);
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: rgba(225,165,78,1.00);
	right: -15px;
	top: 0;
	position: absolute;
	
}
#flag:after {
	content:'';
	border-width: 10px;
	border-style: solid;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: rgba(225,165,78,1.00);
	border-left-color: rgba(225,165,78,1.00);
	right: -15px;
	bottom: 0;
	position: absolute;
	
}
	
.packageHeader {
	background-color: #3B2B20;
	position: relative;
	padding: 6px;
	text-align: center;
	magin-bottom: 20px;
	border-radius: 12px 12px 0 0;
	
	}
	
.packageHeader.packageHeaderOne	{
	background-color:#a6bb79;
}

.packageHeader.packageHeaderTwo	{
	background-color: rgba(140,69,66,1.00);
}

.packageHeader.packageHeaderThree	{
	background-color:#6a665a;
}
	
.packageHeader h3 {
	color: #FFF;
	    font-family: 'sinkin_sans700_bold';
		font-size: 18px;
		line-height: 24px;
		width: 70%;

	}
	
.packageMiddle .packageHeader  {
	margin-top: -10px;
}
	
	.packagePrice {
	width: 120px;
	background: url(../images/priceBackground3.png);
	background-size:contain;
	color: white;
	text-align: center;
	position: absolute;
	bottom: -60px;
	right: 10px;
	z-index: 199;
	

	}
	
#bodyWebMaintenance .packagePrice {
		height: 50px;
	padding: 35px 0;
}

#bodyWebPackages .packagePrice {
			height: 40px;
	padding: 40px 0;
}
	
	.packagePrice p {
		margin-bottom: 0;
	}
	
		.packagePrice h5 {
		color: white;
		font-size: 9px;
		    font-family: 'sinkin_sans700_bold';
	}
	
		.packagePrice h6 {
		font-size: 2.5em;
		color: white;
		text-shadow: rgba(0,0,0,0.6) 1px 2px;
	}
	




.bodyVideo .packageHeader {
	background-color: #5C9694;
	padding: 12px 6px;
}
	.packageFeatures img{
	width: 100%;
	display: block;
	margin: -10px auto 10px auto;
	border-radius: 0 0 50% 50%;

	}
.packageHeader span {
	display: block;
    font-family: 'sinkin_sans700_bold';
		line-height: 1.5;
		text-transform: uppercase;
		font-size: .6em;
}
	
.packageDescription {
	width: 0;
	float: left;

	min-height: 125px;
}

.dogSprite {
	height: 150px;
	width: 150px;
	margin: 10px auto 0 auto;
	display: block;
	background-image:url(../images/maintenanceSprite2014.png);
	position: absolute;

}

#bodyWebMaintenance .dogSprite {
		top: -90px;
	right:-10px;
	transform-origin: center bottom;
	transform: scaleY(0);
}

#bodyWebPackages .dogSprite {
		top:-58px;
	right:-20px;
}

#bodyWebPackages .packageMiddle .dogSprite {
			top:-68px;

}

.dogSpritePackage1 {
	background-position: 0 0;
}
.dogSpritePackage2 {
	background-position: -150px 0;
}
.dogSpritePackage3 {
	background-position: -300px 0;
}
.dogSpritePackage4 {
	background-position: -450px 0;
}

.dogSpritePuppy {
	background-position: 0 -150px;
}
.dogSpriteBarker {
	background-position: -150px -150px;
}
.dogSpriteHound {
	background-position: -300px -150px;
}
.dogSpriteBigDog {
	background-position: -450px -150px;
}



.packageFeatures {
	width: 100%;
	float: right;
	padding-top: 10px;
	margin: 30px 0 10px 0;
}

.packageFeatures ul li {
	border-bottom: 1px #D4D4D4 solid;
	width: 86%;
	display: block;
	margin: auto;
	padding: 6px 0;
	text-align:center;
    font-family: 'sinkin_sans700_bold';
	font-size: 12px;
}

.packageFeatures ul li span {
color: #DA9737

}
.packageOptions {

	width: 90%;
	display: block;
	margin: auto;
	clear: both;
	padding-top: 12px;

}

.packageOptions h5 {
	margin-bottom: 8px;
	    font-family: 'sinkin_sans700_bold';
		font-size: 12px;
}

.packageOptions ul {
	margin: 0 0 20px 20px;
	float: left;
}

.packageOptions li {
		font-size: 11px;
	width: 70%;
	float: left;
	padding-left: 16px;
	
	position: relative;
}



.packageOptions li .fa {
	position: absolute;
	left: 0;
	top: 4px;
		color: rgba(92,150,148,1.00);
}
	
#packageDisclaimer {	
	width: 60%;
	float: right;
	padding-top: 40px;
}

#packageDisclaimer p {	
	font-size: 11px;
	color: white;
	margin-bottom:0;
	text-align: right;
}

.packageSeller {
	width: 120px;
	height: 20px;
	position: absolute;
	top: -30px;
	left: -6px;
	background-color: #E1A54E;
	text-align: center;
	line-height: 20px;
	font-size: 20px;
	padding: 5px;
	box-shadow: -10px -5px 10px 2px rgba(0,0,0,0.1);
	color: rgba(255,255,255,1.00);
	font-family: 'Mouse';
	border-radius: 13px 13px 0 0;
	z-index: 906;
}

.packageSeller:before {
	content: '';
	width: 6px; 
	height: 100px; 
	position: absolute;
	bottom: -100px;
	left: 0;
	background:#E1A54E;
	border-radius: 0 0 0 6px;
}
.packageSeller:after {
	content: '';
	width: 20px; 
	height: 20px; 
	position: absolute;
	top: -6px;
	right: -6px;
	background:url(../images/retroBurst.png);

}

	
	
	
.glossaryWrap {

	position: relative;


}

.glossaryTitle {
	font-family: 'Mouse';
	font-size: 56px;
	font-weight: normal;
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
	color: #534c48;
}

.glossaryTitle h4 {
	font-size: 1em;
}



.glossaryTitle span{
	font-size: .6em;
	display: block;
}

.glossaryTitle img {
	display: block;
	margin: auto;
}
.glossaryPre {
	background-position: 0 0;
}

.glossaryProduction {
	background-position: 0 -300px;
}

.glossaryPost {
	background-position: 0 -600px;
}
.glossaryVideoMore {
	background-position: 0 -900px;
}

.glossaryWebPackages {
	background-position: -200px 0;
}

.glossaryItem {

	width: 25%;
	padding: 12px 20px;
	float: left;
	box-sizing: border-box;


}

.glossaryItem p {
	font-size: 12px;
}


.glossaryItem h4 {
	text-align:center;
	margin-bottom: 12px;
	    font-family: 'sinkin_sans700_bold';
		font-size: 14px;
}

#videoServices {
	padding: 10px 0;
}

#videoServices li {
		border-bottom: solid 1px #E0E0E0; 
		padding: 5px 0 5px 10px;
		background:url(../images/featureCheck.png) no-repeat left center;
		width: 45%;
		float: left;
		font-size: 12px;
}

.bgWhite {
	background: white;
}

.iconVideoPackage {
	display: block;
	margin: -40px auto 10px auto;
	height: 50px;
	width: 50px;
	background:url(../images/videoPackageSprite.png) no-repeat #FFF;
	border-radius: 50%;
	border: solid 5px white;
	
	

	
}

.iconVideoPackage.iconVideoMotionGraphics {
		background-position: 0px 0px;
}
.iconVideoPackage.iconVideoExplainer {
		background-position: -50px 0px;
}
.iconVideoPackage.iconVideoGreenScreen {
		background-position: -100px 0px;
}
.iconVideoPackage.iconVideoBlog {
		background-position: -150px 0px;
}
.iconVideoPackage.iconVideoMovieTrailer {
		background-position: -200px 0px;
}
.iconVideoPackage.iconVideoPhotoMontage {
		background-position: -250px 0px;
}
.iconVideoPackage.iconVideoTestimonial {
		background-position: -300px 0px;
}
.iconVideoPackage.iconVideoCustom {
		background-position: -350px 0px;
}

.icon150 {
	display:block;
	margin: 0 auto 10px auto;
	height: 75px;
	width: 75px;
	background-image: url(../images/icon150half.png);
	background-repeat: no-repeat;
	overflow: hidden;
}

#videoProduction .icon150, #webMaintenance .icon150 {
	float:none;
	margin: auto;
	display:block;
	
}


  /* ------ Row 1 ------- */ 

.icon150.icon150Updates {
	background-position: 0px 0px;
}
.icon150.icon150Write {
	background-position: -75px 0px;
}
.icon150.icon150Graphics {
	background-position: -150px 0px;
}
.icon150.icon150Content {
	background-position: -225px 0px;
}
.icon150.icon150Blog {
	background-position: -300px 0px;
}
.icon150.icon150Email {
	background-position: -375px 0px;
}
.icon150.icon150Social {
	background-position: -450px 0px;
}
.icon150.icon150Subscriptions {
	background-position: -525px 0px;
}

.icon150.icon150CopyHours {
	background-position: -675px 0px;
}



.icon150.icon150Bonus {
	background-position: -600px 0px;
}

  /* ------ Row 2 ------- */ 

.icon150.icon150DesignMeeting {
	background-position: 0px -75px;
}
.icon150.icon150Discovery {
	background-position: -75px -75px;
}
.icon150.icon150SeoResearch {
	background-position: -150px -75px;
}
.icon150.icon150WebVideo {
	background-position: -225px -75px;
}
.icon150.icon150Presentation {
	background-position: -300px -75px;
}
.icon150.icon150Competition {
	background-position: -375px -75px;
}
.icon150.icon150Testing {
	background-position: -450px -75px;
}

.icon150.icon150Customize {
	background-position: -525px -75px;
}

.icon150.icon150Gather {
	background-position: -600px -75px;
}

.icon150.icon150Gallery {
	background-position: -675px -75px;
}

  /* ------ Row 3 ------- */ 

.icon150.icon150SEO {
	background-position: 0px -150px;
}

.icon150.icon150Responsive {
	background-position: -75px -150px;
}


.icon150.icon150DesignedPages {
	background-position: -150px -150px;
}

.icon150.icon150DynamicElements {
	background-position: -225px -150px;
}
.icon150.icon150WebMaintenance {
	background-position: -300px -150px;
}

.icon150.icon150ContactForm {
	background-position: -375px -150px;
}

.icon150.icon150BasicPages {
	background-position: -450px -150px;
}

.icon150.icon150ServicePages {
	background-position: -525px -150px;
}



.icon150.icon150VidCam {
	background-position: -675px -150px;
}

  /* ------ Row 4 ------- */ 

.icon150.icon150GreenScreen {
	background-position: 0px -225px;
}

.icon150.icon150VirtualSet {
	background-position: -75px -225px;
}

.icon150.icon150OptimizeVideo {
	background-position: -150px -225px;
}

.icon150.icon150Character {
	background-position: -225px -225px;
}
.icon150.icon150BankBorrow {
	background-position: -300px -225px;
}

.icon150.icon150Borrow {
	background-position: -375px -225px;
}
.icon150.icon150Bank {
	background-position: -450px -225px;
}




.icon150.icon150Channels {
	background-position: -675px -225px;
}


  /* ------ Row 5 ------- */ 

.icon150Editing {
	background-position: 0px -300px;
}
.icon150.icon150Sound {
	background-position: -75px -300px;
}
.icon150.icon150FX {
	background-position: -150px -300px;
}
.icon150.icon150Titles {
	background-position: -225px -300px;
}
.icon150.icon150Virtual {
	background-position: -300px -300px;
}
.icon150.icon1503D {
	background-position: -375px -300px;
}
.icon150.icon150Rendering {
	background-position: -450px -300px;
}
.icon150.icon150Compression {
	background-position: -525px -300px;
}
.icon150.icon150Upload {
	background-position: -600px -300px;
}


  /* ------ Row 6 ------- */ 

.icon150.icon150Magic {
	background-position: 0px -375px;
}

.icon150.icon150Message {
	background-position: -75px -375px;
}
.icon150.icon150Audience {
	background-position: -150px -375px;
}
.icon150.icon150VoiceTalent {
	background-position: -225px -375px;
}
.icon150.icon150SoundFX {
	background-position: -300px -375px;
}
.icon150.icon150PhotoWork {
	background-position: -375px -375px;
}
.icon150.icon150MotionGraphics {
	background-position: -450px -375px;
}

.icon150.icon150Animation {
	background-position: -525px -375px;
}

.icon150.icon150Script {
	background-position: -600px -375px;
}

.icon150.icon150Animation3D {
	background-position: -675px -375px;
}


  /* ------ Row 7 ------- */ 



.icon150.icon150Meeting {
	background-position: 0px -450px;
}

.icon150.icon150Storyboard {
	background-position: -150px -450px;
}
.icon150.icon150Scheduling {
	background-position: -225px -450px;
}
.icon150.icon150Shooting {
	background-position: -300px -450px;
}
.icon150.icon150Talent {
	background-position: -375px -450px;
}


.icon150.icon150PostLevelA {
	background-position: -600px -450px;
}
.icon150.icon150PostLevelB {
	background-position: -675px -450px;
}



.icon150.icon150VideoHosting {
	background-position: -675px -300px;
}




  /* ------ Row 8 ------- */ 

.icon150.icon150SiteGoals {
	background-position: -75px -525px;
}

.icon150.icon150UserNeeds {
	background-position: -150px -525px;
}

.icon150.icon150SiteContent {
	background-position: -225px -525px;
}

.icon150.icon150SiteOrganization {
	background-position: -300px -525px;
}

.icon150.icon150SiteAppearance {
	background-position: -375px -525px;
}

.icon150.icon150SiteLaunch {
	background-position: -450px -525px;
}

.icon150.icon150ProTalent {
	background-position: -525px -525px;
}



/* 	==========================================================================
	2. Web Design Portfolio
	========================================================================== */
.webDesignSample {
width: 100%;
float: left;
padding: 20px 0;
}

.webDesignSampleMore {
	width: 100%;
	float: left;
	display:none;
	padding-top: 24px;

}

.webDesignMoreDetails {
	width: 50%;
	float: left;
}

.webDesignMiniGallery {
	width: 48%;

}

.webDesignMiniGallery img {
	max-width: 86%;
	width: auto;
	display: block;
	margin:auto;
	box-shadow: 0 0 0 4px #CCBE8E;
	border: solid 1px #DDD;
	-webkit-transition: all .15s ease-in-out 0s;
	-moz-transition: all .15s ease-in-out 0s;
	-ms-transition: all .15s ease-in-out 0s;
	-o-transition: all .15s ease-in-out 0s;
	transition: all .15s ease-in-out 0s;

}

.webDesignMiniGallery img:hover {
	box-shadow: 0 0 0 4px #CCBE8E, 0 0 1px 6px rgba(0,0,0,.25);
}

.webDesignMiniGallery a {
	max-width: 25%;
	float:left;


}


 
.webDesignDetails {
	width: 38%;
	padding:2%;
	padding: 30px 0;

}

.outerWrapperGreen .webDesignDetails, .outerWhite .webDesignMoreDetails, .outerWrapperGreen .webDesignMiniGallery, .outerWhite .webDesignFlatImage{
	float:right;
}

.outerWhite .webDesignDetails, .outerWrapperGreen .webDesignMoreDetails, .outerWhite .webDesignMiniGallery, .outerWrapperGreen .webDesignFlatImage {
	float:left;
}


.webDesignMoreDetails ul {
	padding-top: 16px;
}
.webDesignMoreDetails ul li {
	margin-left: 25px;
	margin-right: 24px;
	padding-left: 20px;
	position: relative;
	line-height: 1.1;
	font-size: 12px;
	margin-bottom: 16px;
    font-family: 'sinkin_sans700_bold';
	color: #555555;

}

.webDesignMoreDetails ul li .fa {
	position: absolute;
	left: 0;
	top: 0;

}

.webDesignFlatImage {
	width: 58%;


	
}
.webDesignFlatImage img {
	width: auto;
	max-width: 96%;
	margin:auto;
	display: block;

}






/* 	==========================================================================
	5. Video Production Packages
	========================================================================== */
#videoGrid {
	width: 100%;
	float: left;
}

.videoGridItem {
	width: 18%;
	padding: 1.5%;
	float: left;
	position:relative;
	background: white;
	margin: 20px 2% 30px 2%;
	box-shadow: inset 0 0 0 3px #FFF, inset 0 0 0 4px #CCC;
	
	
}

.videoGridItem p {
	font-size: .75em;
}

.videoGridItem h4 {
	text-align:center;
	padding-bottom: 5px;
	border-bottom: solid 1px #D3D3D3;
	margin-bottom: 10px;
}

.videoLearnMore {
	background: #E3AA59;
	position: absolute;
	bottom: -12px;
	right: 10px;
	height: 30px;
	line-height: 30px;
	display: block;
	cursor:pointer;
	color: #FFF;
	padding: 6px;
    font-family: 'Mouse';
	font-size: 1.2em;
	text-align:center;
		-webkit-transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
	-ms-transition: all .3s ease-in-out 0s;
	-o-transition: all .3s ease-in-out 0s;
	transition: all .3s ease-in-out 0s;
		border-radius: 4px;
		border: solid 2px white;

}

.videoLearnMore:hover {
	background:#B88031;
}

.vidPackage {
	width: 92%;
	float: left;
	display: block;
	/* [disabled]background: white; */
	padding: 3.5%;
	/*box-shadow: inset 0 0 0 8px #FFF, inset 0 0 0 9px #CCC;*/
	border-radius: 4px;
	position: relative;
}

.vidPackage.vidPackageHourly {

	background: white url(../images/bigClock.jpg) right center no-repeat;

}

#popcorn {
	width: 200px;
	height: 113px;
	position: absolute;
	top: -50px;
	right: 40px;
	background:url(../images/popcorn.png);

}

.vidPackageDescription {

	float: left;
	padding-bottom: 10px;
		width: calc(100% - 360px); 
	width: -webkit-calc(100% - 360px);
	width: -moz-calc(100% - 360px);
}

#videoHourlyRates {
	width: 96%;
	float: left;
	padding: 2%;
}

.vidRates {
	width: 47%;
	float: left;
	 padding: 10px 1.5% 60px 1.5%;
	 position: relative;
	 
}

.rateControl {
	position: absolute;
	width: 90%;
	left: 5%;
	bottom: 0;


}
.vidRates p {
	font-size: 11px;

}

.vidRates ul {
	width: 33%;
	float: left;
	background-color: #4C8785;
	color: white;

	
}

.vidRates ul li {
	border-bottom: solid 1px #fff;
		 padding: 4px 0;
		 text-align:center;
}

.sampleVideo {
	font-family: 'Mouse';
	height: 50px;
	padding: 10px;
	color: white;
	font-size: 24px;
	line-height: 30px;
	display: block;

}

.vidPackageDescription img {
	float: right;
	max-width: 36%;
	width: auto;
}

.videoPackageList {
	float: right;
	width: 300px;
	padding: 100px 0 40px 0;
	margin-bottom: 40px;
	background-color: #4C8785;
	background-image: url(../images/screw.png), url(../images/screw.png), url(../images/screw.png) , url(../images/screw.png);
	background-repeat: no-repeat;
	background-position: 2% 2%, 2% 98%, 98% 2%, 98% 98%; 
	color: #FFFFFF;
	position: relative;


}






.videoPackageList h6 {
	background-color: #E3AA59;
	text-align: center;
	text-transform: uppercase;
	padding: 12px 0;
	position: absolute;
	top: 30px;
	width: 320px;
	left: -10px;
	font-size: 36px;
	color: white;
}

.videoPackageList h6:after, .videoPackageList h6:before {
	content: '';
	position: absolute;

	bottom: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid  #B4761E;

}

.videoPackageList h6:after {
	right: 0;
	border-right: 10px solid transparent;
}
.videoPackageList h6:before {
	left: 0;
	border-left: 10px solid transparent;
}

.videoPackageList ul li {
    font-family: 'sinkin_sans700_bold';

}
.videoPackageList ul li p {
    font-family: 'sinkin_sans400_regular';
}

.videoPackageList ul  {
	width: 90%;
	margin: auto;

	padding-bottom: 20px;

}
.videoPackageList ul li {
	padding: 10px 12px 10px 30px;
	line-height: 1.1;
	position: relative;
	font-size: 12px;
	border-bottom: solid 1px rgba(255,255,255,0.10);

}
.videoPackageList ul li p {
	font-size: .875em;
	margin-bottom: 0;
}

.videoPackageList li .fa {
	position: absolute;
	left: 0;
	top: 12px;
}
.vidPackagePrice h5 {
	font-size: 2em;




}
.vidPackagePrice h5 span {
	font-size: .5em;
	display:block;
}

.vidPackagePrice {
	text-align: center;
	line-height: 1;
	background-color: #FFFFFF;
	padding: 6px;
	width: 160px;
	display: block;
	margin: 10px auto;
	position: absolute;
	left: 68px;
	bottom: -38px;


}

.vidPackagePrice:after{
	content: url(../images/priceShadow.png);
	position: absolute;
	bottom: -10px;
	left: -4px;
}

.videoLength {
	display: block;
	clear:both;
	font-size: .75em;
	border-top: solid 1px rgba(0,0,0,0.25);
	padding-top: 5px;

}



/* 	==========================================================================
	Small Business Marketing
	========================================================================== */
.marketingSectionExtra {
	display: none; 
	width: 96%;
	float: left;
	background: white;
	clear: both;
	padding: 20px 2%;
	border: solid 2px rgba(0,0,0,.25);
}

.marketingSectionExtra p {
	font-size: 12px;
}

.marketingSectionExtra .column70 img {
	float: right;
	max-width: 40%;
	width: auto;
}

.marketingSectionExtra .column30 ul li {
	margin: 0 10px 10px 10px;
	background: url(../images/retroBulletStar.png) left 13px no-repeat;
	font-family: 'sinkin_sans700_bold';
	font-size: 14px;
	border-bottom: dotted 1px rgba(0,0,0,.25);
	padding: 10px 20px;
	color: #5C9694;
}


.marketingSectionExtra .column30 ul  {
	padding: 10px 0;

}

.marketingSectionExtra .column70  {

	border-right: 1px solid rgba(207,207,207,1.00);
	margin-bottom: 10px;
}


.marketingSection {
	width: calc(90% - 350px); 
	width: -webkit-calc(90% - 350px);
	width: -moz-calc(90% - 350px);
	margin-bottom: 20px;
	padding: 50px 0;
	}
	
	.marketingSection h3 {
		text-transform:capitalize;
	}
	




.marketingSectionTitle {
	width: 300px;
	height: 250px;
	position: relative;
	background-image:url(../images/marketingSprite.png);
	margin-bottom: 20px;

}

.marketingSectionTitleContent {
	background-position: 0 -100px;
}
.marketingSectionTitleVideo {
	background-position: -300px -100px;
}

.marketingSectionTitleBlog {
	background-position: 0 -350px;
}
.marketingSectionTitleEmail {
	background-position: -300px -350px;
}

.marketingSectionTitleWebinar {
	background-position: 0 -600px;
}
.marketingSectionTitleSocial {
	background-position: -300px -600px;
}


#marketingDirectory {
	clear:both;

	}
	
#marketingDirectory h1, #marketingDirectory h4{
		text-align:center;
}

h4#topTagline {
	    font-family: 'sinkin_sans700_bold';
		font-size: 18px;
		margin-bottom: 40px;
}
#marketingIconWrap {
	width: 100%;
	float: left;
	margin-top: 10px;
}
	
.marketingLink {
	width:16.5%;
	float: left;
	padding: 10px 0 40px 0;
	position: relative;
	border-right: solid 1px rgba(0,0,0,.2);
	margin-bottom: 16px;

}



.marketingLink:last-child {
	border: none;
}

.marketingLink p {
	font-size: 10px;
	margin: 0 15px 10px 15px;
	line-height: 1.2
}
#marketingDirectory .marketingLink h4 {
	font-size: 18px;
	width: 80%;
	border-bottom: 1px solid rgba(0,0,0,.25);
	margin: 0 auto 10px auto;
	padding-bottom: 5px;

}

.marketingLinkIcon {
	background-image: url(../images/marketingSprite.png);
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	display: block;
	margin: 0 auto -10px auto;;
	transform: scale(.75,.75);
	
	}
	
.marketingContent .marketingLinkIcon{
	background-position: 0 0;	
}
.marketingVideo .marketingLinkIcon {
	background-position: -100px 0;		
}
.marketingBlog .marketingLinkIcon {
	background-position: -200px 0;
	}
.marketingEmail .marketingLinkIcon {
	background-position: -300px 0;
	}
.marketingSocial .marketingLinkIcon{
	background-position: -400px 0;	
}

.marketingOnline .marketingLinkIcon{
	background-position: -500px 0;	
}

button.toggleDetails {
    font-family: 'Mouse';
	font-size: 24px;
	padding: 8px 12px;
	cursor: pointer;
	display: block;
	margin: auto;
}


button.showMe {
	font-size: 11px;
	padding: 6px;
	display: block;
	position: absolute;
	bottom: 15px;
	right: 20px;
	    font-family: 'sinkin_sans700_bold';

}

button.showMe, button.toggleDetails, button.sampleVideo  {
border-radius: 4px;
color:white;
-webkit-transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
	-ms-transition: all .3s ease-in-out 0s;
	-o-transition: all .3s ease-in-out 0s;
	transition: all .3s ease-in-out 0s;


	text-align: center;
	box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.40);
		cursor: pointer;
	

background: #f7b56a; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #f7b56a 0%, #f8941e 49%, #f7b56a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7b56a), color-stop(49%,#f8941e), color-stop(100%,#f7b56a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7b56a 0%,#f8941e 49%,#f7b56a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7b56a 0%,#f8941e 49%,#f7b56a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7b56a 0%,#f8941e 49%,#f7b56a 100%); /* IE10+ */
background: linear-gradient(to bottom, #f7b56a 0%,#f8941e 49%,#f7b56a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7b56a', endColorstr='#f7b56a',GradientType=0 ); /* IE6-8 */
}

button.showMe:hover, button.toggleDetails:hover, button.sampleVideo:hover {
background: #f49938; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #f49938 0%, #e08200 49%, #f4942e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f49938), color-stop(49%,#e08200), color-stop(100%,#f4942e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f49938 0%,#e08200 49%,#f4942e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f49938 0%,#e08200 49%,#f4942e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f49938 0%,#e08200 49%,#f4942e 100%); /* IE10+ */
background: linear-gradient(to bottom, #f49938 0%,#e08200 49%,#f4942e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f49938', endColorstr='#f4942e',GradientType=0 ); /* IE6-8 */	
}


#back-top {
	position: fixed;
	bottom: 400px;
	right: 4px;
	width: 48px;
	padding: 3px;
	background-color: #E3973D;
	color: white;
	text-align:center;
	border-radius: 6px;
	border: solid 1px white;
	z-index: 4888;
	cursor: pointer;
	font-size: 10px;
	line-height: 13px;
	opacity: 0.5;
	-webkit-transition: all .2s ease-in-out 0s;
	-moz-transition: all .2s ease-in-out 0s;
	-ms-transition: all .2s ease-in-out 0s;
	-o-transition: all .2s ease-in-out 0s;
	transition: all .2s ease-in-out 0s;
}

#back-top:hover {
	opacity: 1;
}

#back-top .fa {
	display: block;
	margin: auto;
}



#postMessage {
	width: 100%;
	margin: auto;
	max-width: 600px;
	text-align:center;
    font-family: 'sinkin_sans700_bold';
		font-size: 24px;
		margin-bottom: 50px;
	
}

#postMessage img {
	max-width: 100%;
	width: auto;
}




/* ==========================================================================
   Media queries
   ========================================================================== */


  /* ------ wider than a typical laptop or notebook (bigger desktop monitors ------- */

@media only screen and (min-width:1400px) {
#topVideo {
	margin-right: 75px;
}


}


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

#topRetro {
	left: 100px;

}
}
@media only screen and (max-width:1200px) {
#videoServices li {
		width: 90%;
		text-align: center;
		margin: auto;
		display: block;
		background: none;

}
}

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

.mainNav a {
	font-size: 22px;
	height: 40px;
		line-height: 40px;
}

.mainNav .secondNav a {

	height: 32px;
		line-height: 32px;
}

.mainNav {
	margin-top: -40px;
}

#footerInformation {
	position: absolute;
	font-size: 32px;
	width: 396px;
	height: 281px;
	padding-top: 100px;
	background: url(../images/footerBillboard2.png);
	right: 50px;
	bottom: 0;
	text-align:center;
    font-family: 'Mouse';

		color: #3b2b20;
}

#homeLinkWrap {

	margin-bottom: 100px;
}
}

@media only screen and (min-width:1024px) and (max-width:1250px) {

.mainNav a {
	font-size: 18px;
	line-height: 30px;
	height: 30px;

}

.mainNav {
	margin-top: -30px;
}

.outerWrapper.firstOuterWrapper {
	/* [disabled]height: 330px; */
}

#topVideo {
	width: 500px;
	height: auto;
	margin-top: 30px;
	margin-bottom: 20px;
}

#topRetro {
	width: 320px;
	height: 320px;
}

#footerInformation {
	float: right;
	font-size: 32px;
	text-align:right;
    font-family: 'Mouse';
	color: white;
	margin-right: 30px;
}

.singlePoint h2 {
	font-size: 50px;
	text-transform: capitalize;

}


	
}


  /* ------ typical laptops with a width of 1366px ------- */ 
@media only screen and (min-width:768px) and (max-width:1152px) {


#topPhone {
	background: #315655;
	position: fixed;
	z-index: 1004;
	width: auto;
	padding: 5px 12px;
	height: auto;
	color: white;
	top: 0;
	right: 10px;
	border-radius: 0 0 15px 15px;
	text-align: center;


}
#topPhone h6 {
	font-size: 24px;
		line-height: 24px;
		color: white;
		letter-spacing:1.1px;

} 



}
  
  /* average size desktops */
@media only screen and (min-width:1024px)  {

	.mainNav {margin-left: 180px;}

}



	  /* tablets in landscape and low res monitors */
@media only screen and (min-width:768px) and (max-width:1023px) {

.wrapper{
	padding-right: 2%;
	padding-left: 2%;

	}
	
#logo {
	max-width: 350px;
}

#largeColumn {
	width: 54%;
}

#smallColumn {
	width: 34%;
}

.listBase li{
	margin-left: 15px;
	margin-bottom: 8px;
	margin-right: 15px;
}

h1 {
	font-size: 3.2em;

}
h2 {
	font-size: 1.8em;

	}
h3 {
	font-size: 1.5em;

}
h4 {
	font-size: 1.4em;

}
h5 {
	font-size: 1.3em;
}
h6 {
	font-size: 1.2em;
}

#mainForm fieldset {
	width: 100%;
}

.mainNav {
	margin-top: -27px;
	margin-left: 0;
}

.mainNav a, .mainNav ul li a {
	font-size: 18px;
}

#logo img {display: none;}

.smallScreenCompanyName {
	display: block;
	font-family:'Mouse';
	color: white;
	font-size: 30px;
	line-height: 60px;
	
}

#logo {width: auto; height:60px; left: 20px;}

#topVideo {
	width: 500px;
	margin: 20px auto 20px auto;
	float: right;

}

#topRetro {
	width: 240px;
	height: 240px;
	left: 0;	
}

.glossaryItem {

	width: 33%;
	margin: 10px 0;
	padding: 10px 20px;
	float: left;

}

.packageFeatures ul li span {
	display: block;

}

#post1 {
	width: 110px;
	height: 110px;
	right: 5%;
	bottom:-100px;

}

#post2 {
	width: 110px;
	height: 110px;
	position: absolute;
	left: 10px;
	top:-80px;

}




.outerWrapper {
	padding: 30px 0;	
}

.homeLink h3 span {
	display: block;
}

.homeLink a  {
	font-size: 12px;
}


.homeLink a span {
	display: none;
}

.outerWrapperWhoop {
	background: url(../images/whoopSmall.jpg) center center no-repeat white;
	min-height: 300px;
}

#whoopTextWrap {
	height: 300px;
}

p.special {
/*	margin-bottom: 30px;*/
}

.outerScience {
	background: url(../images/scienceLabSmall.jpg) center bottom no-repeat;
	height: 350px;
}

#webDesignTopWrap {
	height: 350px;
	width: 50%;
}

#maintenanceTopWrap {
	box-sizing: border-box;
	display: table;
	padding: 0 0 20px 300px;
	margin: 0 auto -10px auto;
	height: 300px;
	width: 100%;
	max-width: 700px;
	background: url(../images/cleaningWomanSmall.png) 10% bottom no-repeat;
	position:relative;
	z-index: 502;
	
	
}




		  
}
@media only screen and (min-width:0px) and (max-width:1023px) {

.singlePoint {
	width: 100%;
}

.largeColumnSplit {
	width: 86%;
	float: none;
	padding: 5%;
	margin-left: 0;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

.listSideBySide {
	width: 100%;
	float: none;
}

.column33 {
	width: 96%;
	margin-left: 2%;
	float: none;
	margin-bottom: 15px;
}

#footerInformation {
	float: none;
	clear: both;
	display: block;
	margin: auto;
	font-size: 32px;
	text-align:center;
    font-family: 'Mouse';
	color: white;

}

#footerInformation a {
		font-size: 32px;
	text-align:center;
    font-family: 'Mouse';
	color: white;
}
.craigCartoon, .nancyCartoon, .dogSprite, .bossPic:before, #rocket, #rocketShadow, #miniNancy, #webomatic {
		display: none;
}

#packagesVideoWrap, #designSVG {
	width: 90%;
	float: none;

	box-sizing:border-box;
	padding: 10px;
	display: table;
	margin: auto;
	max-width: 800px;
	margin-bottom: 30px;


}

.packageHeader h3 {
	width:100%;	
}

.package {padding-bottom:10px;} 

.packageOptions li {
		font-size: 11px;
	width: 90%;
	float: left;
}

.packageOptions ul {
	margin: 0 0 20px 10px;

}

.packageFeatures {

	margin: 0 0 10px 0;
}

.singlePoint h2 {
	font-size: 40px;
	text-transform: capitalize;

}

.ownerBio {
	width: 100%; 

}

.ownerWrapCraig .ownerBio, .ownerWrapNancy .ownerVideo  {
	float: none;
}

.ownerWrapNancy .ownerBio, .ownerWrapCraig .ownerVideo  {
	float: none;
}

.ownerVideo {

	margin: 80px auto 30px auto;
	display: block;
	float: none;

}

#homeVideo {
	width: 100%;
	margin: 30px auto;

	padding: 30px 0 0 0;
}

#homeVideo h1, #homeVideo p  {
	width: 90%;
}

.mobileHide {display:none;}


}


	  /* mobile - center most everythng */
@media only screen and (min-width:0px) and (max-width:767px) {

.mainNav li.navWeb a.desktopOnly, .mainNav li.navVideo a.desktopOnly, .mainNav li.navAbout a.desktopOnly, .mainNav li.navMarketing a.desktopOnly {
	display:none;
}

.wrapper{
	padding-right: 2%;
	padding-left: 2%;
	width: 96%;
	}
	
header {margin-bottom: 50px;}


#mobileRow {
	display: block;
	background: white;
	box-sizing:border-box;
	padding: 10px;
}

.outerWrapper {
	padding: 20px 0;
}

.outerWrapperWhoop, .chromeBar {
	display:none;
}

#topPhone {
	position: absolute;
	z-index: 1004;
	padding: 0;
	background:none;
	color: white;
	top: 5px;
	right: 5px;
	text-align: center;
	border-radius: 0;
}

.homeText {
	width: 94%;
	padding: 10px 3%;
	float: left;
}

.homeLink {
	width: 94%;
	max-width: 300px;
	float: none;
	display: block;
	margin: 0 auto 70px auto;
}

p.special, #billboardClearance {
	display: none;
}
	
#largeColumn, #smallColumn {
	padding-top: 10px;
	padding-bottom: 10px;	
}

#largeColumn, #smallColumn {
	float: none;
	width: 95%;
	display: block;
	margin-bottom: 20px;
}

.column70, .column30 {
	width: 90%;
	padding: 20px 2%;
	float: none;
	display: block;
	margin: 10px auto;
	}

.secret {
	width: 96%;
	float: none;
	padding: 10px;
	margin: 0 auto 20px auto;
	display: block;
	box-shadow: none;
	
}

.packageHeader {

	border-radius: 0;
	
	}

#packageWrap {
	position: relative;
	margin: 20px auto ;

	width: 100%;
	max-width: 1100px;
	display: block;
	
	}





#tagLine, .formWrap, .contactLearnMore, #topRetro, #phoneBar, #logo, #topPhone p, .webDesignSample .webDesignSampleMore, button.toggleDetails,  .marketingSectionExtra,  #popCornGuys, .sampleVideo, #marketingIconWrap, #phoneColumn, .secretNumber, #postLink, .outerScience, .webomatic {display: none;}



.testimonial {
	width: 94%;

}

.testimonial p {
	padding-right: 12px;
	padding-left: 12px;
	font-size: 14px;
}
	#footerMenu {
	display:none;
	}

#footerInformation {
	float: none;
	text-align: center;

}

#footerSecondaryInformation {
	display: none;	
}

#mainForm {
	float: none;
	display: block;
	margin: 20px auto;
	width:100%;
	max-width: 340px;
	box-sizing: border-box;

}

/* nested fieldset */
#mainForm fieldset {
	border: 0;
	margin: 0;
	padding: 8px 3px;
}

#mainForm input {
	width: 90%;

}

h1 {
	font-size: 1.8em;

}
h2 {
	font-size: 1.6em;

	}
h3 {
	font-size: 1.4em;

}
h4 {
	font-size: 1.4em;

}
h5 {
	font-size: 1.3em;
}
h6 {
	font-size: 1.2em;
}

.listBase li{
	margin-left: 10px;
	margin-bottom: 8px;
	margin-right: 2px;
}

.package{
	width: 90%;
	max-width: 300px;
	margin: 0 auto 80px auto;
	display: block;
	float: none;
	background: rgba(255,255,255,1.00);
	position: relative;
	padding-bottom: 10px;

	border-radius: 0;
	}
#flagPole, #flag, #leftShadow, #rightShadow, #bottomShadow, #extraBottom, #extraTop, .outerWrapperNancy, #post1, #post2, #post3 {
	display: none;	
}

.packagePrice {
	bottom: -80px;
	right:0;
}
	
	.equalColumn, 	.sideBySide {
	width: 94%;
	padding: 10px 3%;
	float: left;
	}
	

	.glossaryItem {

	width: 100%;
	margin: auto;
	padding: 5px;
	float: left;

}

.glossaryTitle h4 {
	font-size: 36px;
}

#topVideo {
	width: 100%;
	margin: 10px auto;
}

.testimonial img {
	border-radius: 50%;
	float: none;
	margin: 10px auto;
	border: 2px solid #FFF;
	display: block;
}

.missionList {
	width: 92%;
	padding: 10px 4%;
	float: left;
}

.bossBio, .bossPic {
	width: 92%; 
	float: none;
	position:relative;
	display: block;
	margin: 12px auto;
}

.bossBio, .bossPic  {
	max-width:400px;
}

.bossBio ul li {
	margin:0 30px 10px 40px;
	list-style:disc;

}

.webDesignDetails, .webDesignFlatImage {
	width: 96%;
	padding:2%;
	display:block;
	margin: auto;
}

.videoPackageList {
	float: none;
	width: 100%;
	max-width: 400px;
	padding: 80px 0 40px 0;
	margin: 0 auto 40px auto;

	background-image: none;

	color: #FFFFFF;
	position: relative;
}

.vidPackageDescription {

	float: none;
	padding-bottom: 10px;
		width: 100%; 

}

.videoPackageList h6 {
	background-color: #E3AA59;
	text-align: center;
	text-transform: uppercase;
	padding: 12px 0;
	position: absolute;
	top: 10px;
	width: 100%;
	left: 0;
	font-size: 30px;
	color: white;
}

.videoPackageList h6:after, .videoPackageList h6:before {
	display: none;

}

.vidRates {
	width: 97%;
	float: left;
	 padding: 10px 1.5% 60px 1.5%;
	 position: relative;
	 
}
.videoGridItem {
	width: 88%;
	padding: 4%;
	float: left;
	position:relative;
	background: white;
	margin: 20px 2% 30px 2%;
	box-shadow: inset 0 0 0 3px #FFF, inset 0 0 0 4px #CCC;
	
	
}

.vidRates ul li {
	font-size: 13px;
}

.marketingSectionTitle, .marketingSection  {
	float:none;
	margin:auto;
	display: block;
}

.marketingSection {
	width: 100%;
}

#contentVideo {
		width: 100%;
	height: auto;

}

.videoSampleDetails {
	display: block;
	float: left;
	width: 90%;
	margin-left: 5%;
}

#css-poster {
	width: 100%;	
}







	  
}


/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}




  /* larger screen smart phones and mini tablets  */
@media only screen and (min-width:481px) and (max-width:767px) {

  
}


  /* small screen smart phones */
@media only screen and (max-width:480px) {

 #mainForm input {
	width: 92%;

}

.picSizeLimit, .floatRight, .floatLeft{
	max-width: 90%;
	float: none;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 15px;
} 

.ownerVideo {


	display: none;


}
}


  /* super tiny small screen */
@media only screen and (max-width:320px) {

  
}





/* ==========================================================================
   Navigation for desktops and some tablets
   Leave these next two media query sections for nav items only
   ========================================================================== */
  /* be sure to adjust break point on mobile accordingly  */
@media only screen and (min-width: 768px) {

.mainNav li.navWeb a.mobileOnly, .mainNav li.navVideo a.mobileOnly, .mainNav li.navAbout a.mobileOnly, .mainNav li.navMarketing a.mobileOnly{
	display:none;
}

.marketingSectionTitle  {
	float:right;
	margin-right: 5%;
	margin-top: 35px;
}

.outerWrapperGreen  .marketingSectionTitle {
	float:left;
	margin-left: 5%;
	margin-right: 0;
}

.marketingSection  {
	float:left;
	margin-left: 5%;
	margin-right: 0;


}

.outerWrapperGreen  .marketingSection {
	float:right;
	margin-right: 5%;
	margin-left: 0;

}


.mainNav {
	float: left;
	display: inline-block;
	position: relative;
	z-index: 1012;

	margin-bottom: 30px;
}
.mainNav li {
	float: left;
	position: relative;
	background-color: #5c9694;	
		border-radius: 10px 10px 0 0;


}

/* main level link */
.mainNav a {
	color: #3b2b20;
	background-color: #F8F7DC;
	text-decoration: none;
	display: block;
	padding: 0 20px;
	margin: 0;
    font-family: 'Mouse';
	text-transform: lowercase;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	border-radius: 10px 10px 0 0;
	box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.25);
}

.mainNav a:hover, .bodyWeb .mainNav li.navWeb a, .bodyVideo .mainNav li.navVideo a, .bodyMarketing .mainNav li.navMarketing a, .bodyAbout .mainNav li.navAbout a, .bodyContact .mainNav li.navContact a, .bodyHome .mainNav li.navHome a {
	background-color: #5c9694;
	color: #FFF;
	box-shadow: none;
}

.bodyWeb .secondNavWeb, .bodyVideo .secondNavVideo, .bodyMarketing .secondNavMarketing, .bodyAbout .secondNavAbout {
	display: block;
}



.secondNav {
	background-color: #5c9694;
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
	bottom: -42px; 
	white-space: nowrap;
	height: 32px; 
	float: left;

	border-radius: 0 0 21px 21px;
	display: none;
	padding: 5px 21px;
}

.secondNav li {


}

.secondNavWeb {
		width: 400px;

}

.secondNavVideo {
		width: 320px;	
}
.secondNavMarketing {
		width: 300px;	
}

.secondNavAbout {
		width: 185px;	
}




.secondNav a {
	color: #F8F7DC;
	text-decoration: none;
	display: block;
	line-height: 32px;
	margin: 0 10px 0 0;
    font-family: 'Mouse';
	font-size: 18px;
	white-space: nowrap;
	padding: 0 4px;
	background-color: transparent;
		border-radius: 0;
		box-shadow: none;


}

.secondNav li a:hover, 
#bodyWebDesign .secondNavWeb li.nlWebDesign a, 
#bodyWebPackages .secondNavWeb li.nlWebPackages a, 
#bodyWebMaintenance .secondNavWeb li.nlWebMaintenance a,
#bodyWebPortfolio .secondNavWeb li.nlWebPortfolio a,
#bodyCaseStudy .secondNavWeb li.nlWebCase a,    
#bodyAbout .secondNavAbout li.nlAboutUs a,
#bodyBosses .secondNavAbout li.nlAboutBosses a,  
#bodyVideoProduction .secondNavVideo li.nlVideoProduction a,
#bodyVideoSubscriptions .secondNavVideo li.nlVideoSubscriptions a,
#bodyVideoPackages .secondNavVideo li.nlVideoRates a,
#bodyVideoGallery .secondNavVideo li.nlVideoGallery a,
#bodyMarketing .secondNavMarketing li.nlMarketingBusiness a, 
#bodyMarketingSEO .secondNavMarketing li.nlMarketingSEO a {
	text-decoration: underline;
	color: white;
}


	
}

/* ==========================================================================
   Navigation for mobile - adjust size on breakpoints to match desktops
   ========================================================================== */
@media only screen and (min-width: 0px) and (max-width: 767px) {




	/* Mobile navigation toggle button
	-------------------------------------------------------- */

	.navButton {
		display: block;
		position: absolute;
		top: 7px; /* change if putting a logo above the mobile navigation */
		left: 7px;
		width: 50px;
		height: 35px;
		background: url('../images/menuIcon.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../images/menuIcon.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../images/menuIcon.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../images/menuIcon.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
		cursor: pointer;
		border: 0 none;
		border-bottom: 1px solid rgba(255,255,255,.1);
		box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
		border-radius: 5px;
		z-index: 999;
		text-indent: -9999px;
	}
	.navButton:hover { 
		background-color: rgba(0,0,0,.1); 
	}
	.navButton.open {
		background: url('../images/closeIcon.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../images/closeIcon.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../images/closeIcon.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../images/closeIcon.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
	}

	/* Mobile Navigation Background Bar
	-------------------------------------------------------- */



	.mainNav {
	width: 100%;
	float: none;
	background-color: #5C9694; /* change the base menu color */
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	display: block;
	height: 50px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.6);
	position: absolute;
	top: 0px; /* change if putting a logo above the mobile navigation */
	left: 0px;
	z-index: 998;
	clear: both;
	}
	.mainNav li {
		display: none;
		width: 100%;
		font-family: Arial;
	}
	.mainNav li a {
		display: block;
		width: 90%;
		padding: 10px 5%;
		font-size: 14px;
		font-weight: bold;
		text-shadow: -1px -1px 0 rgba(0,0,0,.15);
		color: white;
		text-decoration: none;
		border-bottom: 1px solid rgba(0,0,0,.2);
		border-top: 1px solid rgba(255,255,255,.1); 
	}
	.mainNav li a:hover {
		background-color: rgba(255,255,255,.5);
		border-top-color: transparent;
	}
	.mainNav > li:first-child {
		border-top: 1px solid rgba(0,0,0,.2);
	}

	/* Toggle the navigation bar open  */

	.mainNav.open { 
		height: auto; 
		padding-top: 50px;
	}
	.mainNav.open li { 
		display: block; 
	}

	/* Submenus (.parent class indicates dropdowns) */

	.mainNav > li:hover > a {
		background: rgba(0,0,0,.5);
		border-bottom-color: transparent;
	}
	.mainNav li.parent > a:after {
	content: "▼";
	color: rgba(255,255,255,.5);
	float: right;
	}
	.mainNav li.parent > a:hover {
		background: rgba(0,0,0,.75);
	}
	.mainNav li ul {
		display: none;
		background: rgba(0,0,0,.5);
		border-top: 0 none;
		padding: 0;
	}
	.mainNav li ul a {
		border: 0 none;
		font-size: 12px;
		padding: 10px 5%;
		font-weight: normal;
	}
	.mainNav li:hover ul {
		display: block;
		border-top: 0 none;
	}


} 






/* ==========================================================================
   @fontface available fonts
   ========================================================================== */

/* friendly looking body font | good alternative to verdana */





@font-face {
    font-family: 'sinkin_sans400_regular';
    src: url('../fonts/SinkinSans-400Regular-webfont.eot');  
    src:  url('../fonts/SinkinSans-400Regular-webfont.svg#sinkin_sans400_regular') format('svg'),
	url('../fonts/SinkinSans-400Regular-webfont.ttf') format('truetype'),
	url('../fonts/SinkinSans-400Regular-webfont.eot?#iefix') format('embedded-opentype'),
 
         
         url('../fonts/SinkinSans-400Regular-webfont.woff') format('woff');
       

    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sinkin_sans700_bold';
    src: url('../fonts/SinkinSans-700Bold-webfont.eot');
    src: url('../fonts/SinkinSans-700Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SinkinSans-700Bold-webfont.woff') format('woff'),
         url('../fonts/SinkinSans-700Bold-webfont.ttf') format('truetype'),
         url('../fonts/SinkinSans-700Bold-webfont.svg#sinkin_sans700_bold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Mouse';
    src: url('../fonts/mousememoirs-regular-webfont.eot');
    src: url('../fonts/mousememoirs-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mousememoirs-regular-webfont.svg#mouse_memoirsregular') format('svg'),
         url('../fonts/mousememoirs-regular-webfont.woff') format('woff'),
         url('../fonts/mousememoirs-regular-webfont.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'halohand';
    src: url('../fonts/halohandletter-webfont.eot');
    src: url('../fonts/halohandletter-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/halohandletter-webfont.svg#halohandletterbold') format('svg'),
         url('../fonts/halohandletter-webfont.woff') format('woff'),
         url('../fonts/halohandletter-webfont.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;

}