@charset "utf-8";

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

.clearFloat {clear: both;}


#wufoo-m1pd7jep0m5wfv5 {padding-left: 1em;
padding-top: 1em;}
body {
	margin: 0; padding: 0;
	font-family: 'PT Sans', sans-serif;

}

h1, h2, h3, h4, ol, ul { margin: 0;	padding: 0; }

.christmas {font-size:1.3em;
			font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"}

.xmas {font-size:1.2em;}

.container{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 350px;}
	  

header{ } 

		.scrollToTop{
			width:100px; 
			height:80px;
			/*padding:10px; 
			text-align:center;
			background: whiteSmoke;
			font-weight: bold;
			color: #444;
			text-decoration: none;*/
			position:fixed;
			bottom:25px;
			right:0px;
			display:none;
			background-image: url(file:///T:/Sign%20Studio%20Root/images/scroll.png);
			background-repeat: no-repeat;
			/*background-position: center 0px 50px;*/
			background-size: 50%;
			
		}
		.scrollToTop:hover{ 
			text-decoration:none; }

#youtube {padding-bottom: 2em;
		padding-top: 1em;
		text-align: center;}

.declan {text-align: center;
		padding-left: 3em;
		padding-right:3em;
		padding-bottom:.2em;}


/* ---------- Top nav bar and logo */
#logoAndNavWrapper { 
	background-color: #3A475F; 
	padding: .5em; 
	height: 3.8em;
	}
/* ---------- Top nav bar and logo */
#logoAndNavWrapper2 {
	background-color: #566279;
	clear: both; 
	padding: .8em .1em 2.8em 0em;
	height: 6.4em;
}

h1.logo {/* width: 30%;*/ } /* added this */

.logo img { /* top left small logo */
	
	float: left; 
	width: 2.5em; 
}

.logo2 {
	align-content: center;
	width: 35%;
	padding-left: 6em;


}

/*#homeNav { margin-left: 1em;}*/
#homeNav {
	 
	text-align: right;
	padding-top: .9em; /*Added this. It's optional.. for vertical positioning */
}

#homeNav li{ /*adjusted the selector from 'nav li' to make it more specific*/
	display: inline;
	padding-left: .24em; /*I reduced this so the links wouldn't need to spill onto a second line at 320px. Also changed it from padding-right to padding-left. */
	color: #FFF;
	font-size: .7em;
	
}
/* ---------------------------------------- */

#homeNav2 {
	 
	text-align: center;
	padding-right: 2em;
	padding-top: .9em; /*Added this. It's optional.. for vertical positioning */
}

#homeNav2 li { /*adjusted the selector from 'nav li' to make it more specific*/
	display: inline;
	padding-left: 2.5em; 
	color: #FFF;
	font-size: 1em;	
}

.gallery {margin-left: 12em;}

.homeparagraph {padding-left: 2em;
				padding-right:2em;
				font-size:.7em;}
	


/* ------------------------------- banner image section */
.parent { /* Index only. Wraps around car and large logo*/
  	
	clear: both; 
	padding: 1.1em .1em 0em .7em;
	height: 10.5em;
	/*-------*/
	background-image: url(../images/ipadslant.png);
	background-size: 100%; 
	background-repeat: no-repeat;
	background-position: center top;
}

.car {
	float: left; 
	width: 50%; 
	padding-top: 1.5em;
}
.sitename {
	width: 35%; 
	margin-left: 6%; 	
		}

.parent2 {
	clear: both; 
	padding: 2em .1em 0em .7em;
	height: 23.5em;
	background-image:url(../images/slant.png);
	background-size: 100%; 
	background-repeat: no-repeat;
	background-position: center;
	
}

.sitename2 {
	float:none;
	width: 35%;
}

.car2 {
	float: left; 
	width: 50%; 
	padding-top: 4em;
	padding-right: 1em;
}
.about2 {
	text-align: center;
	padding-right: 2em;
	padding-top: 1.3em;
	font-size: 1em;
}

/* ----------------------------------- ABOUT section*/
#heading { /* this could be '#about h1 {}' instead*/
	text-align: center;
	padding-bottom: 1em;
	font-size: 1.1em;
}


#about p {	
	clear: both; /* you always have to have a clear: both following a pair of floated elements */
	text-align: center;
	padding-top: 0;
	padding-left: 1em;
	padding-right: 1em;
	font-size: 1em;
	margin-left: .1em;
	color: #222;
}

.center {display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
 
}


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

/*nav ul { }*/

main {  
	background-color: #fff;
	clear: both; padding: 0; margin: 0;}	

/* -------------- SERVICES section */
/* h2 { text-align: center; }this should be '#services h1 {}' instead*/	
#services h1 {
	margin-bottom: 1em;
	font-size: 1.6em; text-align: center;} /* adjusted */
#services {
	margin-top: 3em; /*changed from 20px*/
	font-size: .8em;
	color: #1A202B;	
}

#serviceIcons div { /*the rules for BOTH the blue &  white divs */
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	float: left;
	width: 50%; 
	text-align: center;	
	height: 160px; 
	}

#services2 h1 {
	margin-bottom: 1em;
	font-size: 1.6em; text-align: center;} /* adjusted */
#services2 {
	margin-top: 3em; /*changed from 20px*/
	font-size: .8em;
	color: #1A202B;	
}

#serviceIcons2 div { /*the rules for BOTH the blue &  white divs */
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	float: left;
	width: 25%; 
	text-align: center;	
	height: 160px; 
	}

#theteam {text-align: center;
	padding-bottom: 3em;
	}

#theteam h1 	{
	margin-bottom: .2em;
	font-size: 2.4em; text-align: center;} 


#theteam img {
	width: 80%;
	margin-left: .4em;
	margin-right: .4em;
}




.flex-container {
  display: flex;
  justify-content: center;

}

.flex-container2 {
 	padding-top: 1.5em;
  	display: flex;
  	justify-content: center;
	margin-right: 4em;
	margin-left: 6em;
}
.teamwrapper {margin-left: 4em;;
				width: 85%;}

.teamheading {text-align: center;
			padding-top: 24em;
			padding-bottom: 1em;
			font-size: .7em;
			color: #1A202B;}
			

.blue, .white {
	text-transform: uppercase; 
}

.blue { background-color: #566279 }
.white { 
	color: #000;
	background-color: #fff;
}

#serviceIcons div h2 { 
	font-size: 1.2em; padding-top: .9em;}	
#serviceIcons img { 
	margin-top: 2em;
	width: 20%;}

#serviceIcons2 img { 
	margin-top: 2em;
	width: 45%;}
#serviceIcons2 div h2 { 
	font-size: .9em; padding-top: .1em;}


.business {color: #EAAA80}
.information {color: #EAAA80;}
.vehicle {color: #EAAA80}
.marine {color: #EAAA80}
.shop {color: #566279}
.safety {color: #566279}
.banners {color: #566279}
.exhibition {color: #566279}

/* ================ I added this section below in order to individually adjust the size of the smaller images. To make the class applay to the h2 AND the image in the HTML I moved the class to the div from the h2 ===*/
#serviceIcons div.vehicle img, #serviceIcons div.banners img, #serviceIcons div.exhibition img  { 
	width: 45%; margin-top: 3em;
} 
#serviceIcons div.shop img, #serviceIcons div.business img {
	width: 33%; 
	margin-top: 2.2em;	
}
#serviceIcons div.safety img {
	width: 40%;
	margin-top: 2.5em;
}

#serviceIcons div.marine img {
	width: 55%;
	margin-top: 3.4em;
}

#serviceIcons div.information img {
	width: 30%;
	margin-top: 1.5em;
}
/* ========================================================= */

#serviceIcons2 div.vehicle img  { 
	width: 45%; margin-top: 3.5em;
} 
#serviceIcons2 div.shop img {
	width: 36%; 
	margin-top: 2.6em;	
}
#serviceIcons2 div.safety img {
	width: 45%;
	margin-top: 2.4em;
}

#serviceIcons2 div.marine img {
	width: 55%;
	margin-top: 3.8em;
}

#serviceIcons2 div.information img {
	width: 30%;
	margin-top: 1.6em;
}

#serviceIcons2 div.banners img {
	width: 50%;
	margin-top: 4.2em;
}

#serviceIcons2 div.exhibition img {
	width: 50%;
	margin-top: 3.3em;

}

#serviceIcons2 div.business img {width: 33%;
	margin-top: 2.3em;}

/* ========================================================= */


main, div.endImage { background-color: #fff;}

div.endImage img{	
	padding: 0;
	padding-top: 4em;
	width: 100%; /* added this instead of using width and height values in the HTML */	
}

div.endImage2 img{	
	padding: 0;
	padding-top: 1.5em;
	width: 100%;
	
}
footer {
	clear: both; 
	background-color:#2A3242;
	font-size:.7em;
	font-weight: 500;
	padding: 1em 2em;
	
	color: #EAAA80;
	text-align: center;
}

/* ========================================== */

.about {padding-left: 1em;
		padding-right: 1em;}

#servicespage {background-color:#566279;
			padding-left: 1em;
			padding-right: 1em;
			line-height: 1.7;
			color: white;
			padding-top: 1.1em;
			padding-bottom: 1.5em;
			}

.servicelist {padding-left: 1em;
			padding-right: 1em;
			line-height: 1.7;
			color: white;
			padding-top: 1em;
			padding-bottom: .6em;}

#contact {background-image: url(../images/ipadslant.png);
		background-repeat: no-repeat;
		padding-top: 1em;
		background-size: 270%;
}

.padding {padding-left: 1em;
		padding-right: 1em;}


.info {color:#EAA080;
		font-size: 1em;}


.directions {padding-top: 5.5em;
			padding-right: 1em;}

.directionsh {font-size: 1em;
			padding-top: 5em;}


.info2 {color: white;
		}

/* ====================== Link state styles ============== */



#homeNav a:link { 
	color: #fff; text-decoration: none; 	}

a:link {
	color: #fff; text-decoration: none;
}

a:hover {
	color: #EAAA80; text-decoration: none; }

a:active {
	color: #EAAA80; text-decoration: none; }

/*======================change visited!!!=============== */

a:visited { 
	color: #fff;
	text-decoration: none;
	}

a.currentlink:link, a.currentlink:visited { 
	color: #EAAA80;
}

a.serviceslink:link, a.serviceslink:visited, a.serviceslink:active { 
	color: #566279;
	text-decoration: none;
}

a.services2link:link, a.services2link:visited, a.services2link:active { 
	color: #EAAA80;
	text-decoration: none;
}

.gallerylink li {text-align:center;
				display: inline;
				padding-left: 1.2em; 
				color: #566279;
				font-size: 1em;}
				
.gallerylink {padding-top: 1em;
			text-align:center;
			padding-right: .4em;}
/*======================change visited!!!=============== */

#homeNav2 a:link {
	color: #fff;
	text-decoration: none;
	margin-left: -2px;
}

a:hover {
	color: #EAAA80;}

a:active {
	color: #EAAA80; text-decoration: none; }

/* ------------------ ABOUT PAGE STYLES */
article {
	margin: 0 1em;
}
article h1 { padding-top: 1em; font-size: 1.2em;}
article p { font-size: .9em; line-height: 1.6em; }


.aboutheading {text-align: center;
				font-size: .7em;
				color:#181E2A;
				padding-bottom: 1em;}
	
.aboutus {padding-left: 1em;
			padding-right: 2em;
	}

.aboutpage2 {margin-top: 1em;}

#aboutTeam {margin-top: 2em;}
.aboutTeam h2 {font-size: 1em;}
/* Three columns side by side */
.column {
    float: left;
    width: 44%;
	height: 0%;
    margin-bottom: 16px;
    padding: 0 8px;
	padding-left: .5em;
}

/* Display the columns below each other instead of side by side on small screens */

 

/* Add some shadows to create a card effect */

.row { 
	width: 90%; margin: 0 auto;
	margin-bottom: 1em; 
	text-align: center;
}


.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	height: 14.8em;
	
	text-align: left;
}


.card2 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	height: 17em;
	
	text-align: left;
}

.card3 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	height: 14.8em;
	
	text-align: left;
}

.card4 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	height: 17em;
	
	text-align: left;
}

.card5 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	height: 15.5em;
	
	text-align: left;
}

.card6 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	height: 15.5em;
	
	text-align: left;
}

.container {
    padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
    content: "";
    clear: both;
    display: table;
}

.title {
    color: grey;
}


/* ========================================================= */

/* ----- end of ABOUT PAGE STYLES */

#gallerypages {padding-left: 1em;
			padding-top: .5em;}
		
.galleryheading {font-size: 1em;
				padding-top: .8em;
				padding-bottom: 1em;
				color: #EAAA80;
				
					}
.gallerysideheading {font-size: .8em;
					padding-top: .5em;
					padding-bottom: .5em;}
					
.startanew h3 {color: #2A3242;
			padding-left:1em;
			padding-top: .5em;
			font-size: 1em;
			padding-bottom: .4em;}
			

/* ---------- Services paeg styles */

#servicesInfo {
	
	background-color: #566279; 
	color: #fff;
	font-size: .9em;
	line-height: 1.8em;
	
}
#servicesInfo ul { 
	list-style-type: none;
	padding-top: .8em;
	padding-bottom: .8em;
	padding-left: .8em;}

/* ========== */

.btn-group button {
    
    padding: 10px 24px; /* Some padding */
	border: 1px #E9AA81;
    outline: 0;
	float: left; 
    color: white;
    background-color: #566278;
    text-align: center;
    cursor: pointer;
    width: 50%;
}

.btn-padding {padding-top: .5em;
			  padding-bottom: .1em;
			
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color:#EBAA82;
}

/*====================== Media Queries  */
#mainbanner {display: none;}
#midbanner {display: none;}
#largebanner {display: none;}

#logoAndNavWrapper2 {display: none;}

.sitename2 {
	display: none;
}
.parent2 {
		display: none;
	}
	.car2 {
		display: none;
	}
	.about2 {display: none;}
	
	#theteam {display: none;}

#serviceIcons2 {display:none;}
#services2 {display: none;}
#aboutback {display: none;}
#polaroid {display: none;}



@media screen and (min-width: 345px) {
	.parent {height: 11em;}

#contact { 
	background-size: 240%;}
}
@media screen and (min-width: 358px){
	
	.parent { height: 12em; }
	#logoAndNavWrapper {
		padding-bottom: 1.4em; 
	}
	
	.logo img { width: 2.8em; 
	padding-top: .1em;
	}
	
	#homeNav { padding-top: 1.3em; }
	
	#homeNav li{ 
		padding-left: .3em; 
		font-size: .85em;
	}
	
	#services h1 {font-size: 1.8em;}
	footer {
		font-size: .8em; line-height: 1.5em;}
	
}

@media screen and (min-width: 383px){
	#contact { 
	background-size: 215%;}
	.card {height: 15.5em;}
	.card3 {height: 15.5em;}
	
	.galleryheading h3 {padding-top: 10.7em;}
	.logo img {padding-left: .3em;}
	#serviceIcons div.vehicle img,  #serviceIcons div.exhibition img { 
		width: 40%; margin-top: 2.6em;
	} 
	
	#serviceIcons div.safety img {
		margin-top: 1.8em;
	}
	#serviceIcons div.shop img {
		width: 30%; 
		margin-top: 2.1em;
	}
	#serviceIcons div.information img {
		width: 28%; 
		margin-top: 1.4em;	
	}
	#serviceIcons div.business img {width: 28%; 
		margin-top: 2.1em;}
	
	
	#serviceIcons div.marine img, #serviceIcons div.banners img {
		width: 40%; margin-top: 3.3em;
	} 
}


@media screen and (min-width: 430px){
	.card5 {height: 16.5em;}
	.card6 {height: 16.5em;}
	#contact { 
	background-size: 190%;}
	.column {
 	padding-left: .8em;}
		
	.parent { height: 14em; }
	#homeNav { padding-top: 1.3em; }
	
	#homeNav li{ 
		padding-right: .2em; 
		font-size: 1em;
	}
	.sitename{
		padding-top: .2em;
	}
	
	#serviceIcons div.information img {
	width: 25%;
	margin-top: .8em;
}
		#serviceIcons div.safety img {
		margin-top: 1.6em;
	}
}



@media (min-width: 480px){
	#contact { 
	background-size: 170%;}
	.column {
 	padding-left: .6em;}
	
	 .column {
        width: 29%;
        display: block;
    }
	.card3 {height: 16em;}
	.card5 {height: 16em;}
	.card6 {height: 16em;}
	.card {height: 14.5em;}
	.card4 {height: 17em;}
	#homeNav li{ 
		padding-right: .6em; 
	}
	.parent { height: 15em; }
	 #serviceIcons div.information img { 
		 margin-top: .6em;}
		 #serviceIcons div.business img { 
			 margin-top: 1.2em;}
	 #serviceIcons div.shop img { 
			 margin-top: 1.2em;}
		#serviceIcons div.safety img {
		margin-top: 1.4em;
	}
	
	}


@media screen and (min-width: 530px){
	.parent { height: 17em; }
	#contact { 
	background-size: 155%;}
	
	.homeparagraph {padding-left: 5em;
				padding-right: 5em;
				font-size:.9em;}
}


@media screen and (min-width: 575px){
	#contact { 
	background-size: 140%;}
		.card {height: 15.5em;}

	
	#serviceIcons div {  	
	height: 180px; 
	}
	#serviceIcons div.marine img { 
		margin-top: 4em;
	} 
		#serviceIcons div.shop img { 
		margin-top: 2em;
	} 
	#serviceIcons div.banners img {
		margin-top: 4em;
	}

	#serviceIcons div.business img {
		margin-top: 1.8em;
	}
	#serviceIcons div.safety img {
		margin-top: 1.5em;
	}
	#about p {font-size: 1.1em;}
	.parent {height: 18em; }
		#homeNav li{ 
		padding-right: 1em; 
	}
}

@media screen and (min-width: 630px) {
	.declan {font-size: 1.2em;
	padding-bottom: 1em;}
	
	.aboutpage2 {font-size: .92em;}
	
	#polaroid {display: block;
				padding-right: 2em;}
				
	#contact { 
	background-size: 130%;}
.column {
 	padding-left: .9em;}
	
#serviceIcons {display: none;}
#services {display: none;}
#serviceIcons2 {display: block;}
#services2 {display: block;}
	/* ================== */

/* ============= */

	.indexNav {display: none;}
	#logoAndNavWrapper2 {
		display: block;
		text-align: left; 
		background-color: transparent;
	}
	
	header{
		background-image: url(../images/ipadsignlogo.png) , url(../images/bg-blue.png) , url(../images/backgroundslant.png);
		background-repeat: no-repeat, repeat-x, no-repeat;
		background-position: center 1em, center -10em, center 15.5em;			
	}
	
	
	.parent, .parent2 { background-image:none }
	.color {
		background-color: transparent;
	}
	
	.sitename {padding-top: 1.3em;}
	.parent {
		display: none;
	}
	.sitename {
		display: none;
	}
	
	.parent2 {display: block;
			height: 21.8em;
			padding: 2em .1em 0em .7em;
		
	}
	
	.sitename2 {display: block;
				}
	.car2 {display:block}
	
	#about {display: none;}
	.about2 {display:block;
			color: #FFF;}
	
	#theteam {display: block;}
	
	#theteam h1 {	
	padding-top: 6em;
}

}

@media screen and (min-width: 680px) {
	.card3 {height: 17em;}
	.card5 {height: 17em;}
	.card6  {height: 17em;}
#contact { background-position:top;
	background-size: 125%;}
	
		#mobilebanner {
		display: none;}
	
	#midbanner {
		display: block;}
		
	.container{
      width: 550px;}
}

@media screen and (min-width: 740px) {
	
	
	
	.aboutpage2 {font-size: 1em;}
	
	#polaroid {
				padding-right: 3.5em;}
	.column {
 	padding-left: .7em;}
	#aboutback {
	display: block;
	background-position: center -10em, right 11em;}
	.column {
		width: 22%;}
	.card {height: 15.5em;}
	.card2 {height: 17.5em;}
	.card3 {height: 15.5em;}
	.card4 {height: 17.5em;}
	.card5 {height: 17.5em;}
	.card6 {height: 17.5em;}
	#homeNav li{ 
		padding-left: 1.6em;
	}
	#homeNav2 {padding-right: 4em;}
	#homeNav2 li {
	padding-left: 4em; }
	.car2 {padding-left: 1.2em;}
	
	#serviceIcons div h2 { 
	font-size: 1.3em;}
	#contact {
	background-image: url(../images/slant.png);
	background-size: 152%;}
	
	.directions {padding-top: .1em;
			}
	
	.flex-container3 {
  	display: flex;
	justify-content: center;}
		
	#directions {color: white;
				padding-top: 0em;
				padding-right: 2.5em;
				padding-bottom: 2em;}
	
	.directionsh {color: #EAA080;
				font-size: 1em;
				padding-top: 0em;}


.flex-container3 > div {
  	width: 280px;
  	margin: 10px;
  	text-align: center;
  	line-height: 25px;
	font-size: 1em;}
	
	.endimage2 {padding-top: 60em;}
	
		.homeparagraph {padding-left: 9em;
				padding-right: 1em;
				}
}

@media screen and (min-width: 765px) {
	.btn-group button {
		width: 25%;
		font-size: .7em;
	}
	.aboutus {padding-left: 3.5em;
			padding-right: 3.5em;
	}
	

	
	  
	
}
@media screen and (min-width: 840px){
	.btn-group button {
		
		font-size: .76em;}
	
		#polaroid {
				padding-right: 5em;}
	.column {
 	padding-left: .8em;}
	.aboutpage2 {font-size:1.04em;}
	
	#contact {background-size: 130%;}
	
	#serviceIcons2 div {  	
	height: 200px; 
	}
	
	#homeNav2 {padding-right: 4.5em;}
	#homeNav2 li {
		padding-left: 5em;}
	.parent2 {height: 28em;}
	
	#theteam h1 {
		padding-top: 9em;}
	
	.teamwrapper {margin-left: 6em;;
				width: 80%;}
	
	#directions {
				padding-bottom: 3em;}
	
	.flex-container2 {margin-left: 9em;
}
		#theteam h1 {
		padding-top: 9em;}
		#services2 {
		margin-top: 2em;
		font-size: .9em;}
		#theteam h1 {
		padding-top: 7em;}
		
.center {
  width: 60%;		
}
	
	
	
}
@media screen and (min-width: 940px) {

	.column {
 	padding-left: .7em;}
	#homeNav2 {padding-right: 6.5em;}
	#homeNav2 li {
	padding-left: 5.4em; }
	.gallery {margin-left: 13em;}
	.parent2 {height: 28.5em;}
	#serviceIcons div h2 { 
	font-size: 1.4em;}
	#contact {background-size: 117%;}
	.teamwrapper {margin-left: 8em;;
				width: 75%;}
	

	
}

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

	
	
	
	
	.column {
 	padding-left: .8em;}

	.card {height: 18.5em;}
	.card2 {height: 20.5em;}
	.card3 {height: 18.5em;}
	.card4 {height: 20.5em;}
	.card5 {height: 20.5em;}
	.card6 {height: 20.5em;}
	
	#homeNav2 {padding-right: 3.5em;}
	#homeNav2 li {
			padding-left: 2.4em; }
	
	
	
	/* =================== */

	.introPar {
		padding-right: 3em;
	}
	/* =================== */
	
	.car2 {padding-top: 5em;
	 padding-left: 3.5em;}
		
	.gallery {margin-left: 22.2em;}
	.about2 {padding-right: 4em;}
	
	#contact {background-size: 135%;}
	
.flex-container2 {
 	padding-top: 1.5em;
  	display: flex;
  	justify-content: center;
	margin-right: 4em;
	margin-left: 6em;}
		
	.teamwrapper {margin-left: 7em;;
				width: 80%;}
	

	#midbanner {display:none;}
	
	#mainbanner {display:block;}
	
	.container {width:750px;}
	
		.homeparagraph {padding-left: 13em;
				padding-right: 13em;
				font-size: 1.1em;}
	
	
}

@media screen and (min-width: 1050px) {
	#aboutback {background-position: center -10em, right 13em;}
}
@media screen and (min-width: 1140px) {
	#aboutback {
	
	background-position: center -10em, right 9em;
	
	}
	#polaroid {
		padding-right: 7em;}
	.column {
 	padding-left: 1em;}
	
	.car2 {width: 45%;}
	.about2 {padding-right: 9em;
			padding-top: 2em; }
#contact {background-size: 125%;}
	
	.teamwrapper {margin-left: 10em;;
				width: 70%;}
	
	.card {height: 20em;}
	.card2 {height: 22em;}
	.card3 {height: 20em;}
	.card4 {height: 22em;}
	.card5 {height: 22em;}
	.card6 {height: 22em;}
	
	
	}
	
@media screen and (min-width: 1216px) {
	
	.btn-group button {
		
		font-size: .9em;}
	
	#aboutback {
	background-position: center -10em, right 9.5em;
	
	}
	
	}
	
	
@media screen and (min-width: 1300px) {
	
	#wrapper {width: 80%;
			margin: 0 auto;
			border: 1px solid grey;}
	
	.card5 {height: 20em;}
	.card6 {height: 20em;}
	.card4 {height: 20em;}
	.card2 {height: 20em;}

	
	#services2 {
	margin-top: 2em; /*changed from 20px*/
	font-size: 1em;}
	
	.car2 {width: 40%;}
	
	#serviceIcons2 div {  	
	height: 210px; 
	}
	
	.about2 {padding-right: 9em;
			padding-left: 6em;}
	#contact {background-size: 110%;}
	.teamwrapper {margin-left: 10.5em;}
	
	

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

		.aboutus {padding-left: 4.5em;
			padding-right: 4.5em;
			font-size: 1.1em;
			padding-bottom: 2em;
			padding-top: 1em;
	}
	
	#aboutback {
	background-position: center -25em, right 4em;
	
	}
	
	.card5 {height: 22em;}
	.card6 {height: 22em;}
	.card4 {height: 22em;}
	.card2 {height: 22em;}
	.card {height: 20em;}
	.card3 {height: 20em;}
	
	
	/*#aboutback {
	background-position: center -16.5em, right 6em;
	}*/
	
	#serviceIcons2 div {  	
	height: 235px; 
	}
	#theteam h1 {
	padding-top: 9em;}
	
	.about2 {padding-top: 3em;}
	.teamwrapper {margin-left: 11em;
				}
	.about2 {
			margin-right: 2em;
			font-size: 1.1em;
			padding-top: 1.2em;}
	
	#servicespage {font-size: 1.1em;}
	
	
}

@media screen and (min-width: 1500px) {
		/*#aboutback {
	
	background-position: center -16.5em, right 5em;
	
	}*/
	.teamwrapper {margin-left: 11.8em;}
	
	#contact {background-size: 115%;}
	
	#directions {margin-left: 1.5em;
				margin-right: 6.5em;
				font-size: 1.1em;}
	
	.directionsh {margin-left: 1.5em;
				margin-right: 3.5em;
				font-size: 1.1em;
				padding-top: 3em;}
	
	.info {font-size: 1.1em;
	padding-top: 1em;}
	.info2 {font-size: 1.1em;}
	
	.about2 {
			font-size: 1.1em;
			padding-top: 1em;}
	
	.car2 {width: 37%;
			padding-right: 3em;
			padding-left: 8em;}
	
	#homeNav2 li {font-size: 1.2em;
		padding-left: 5.5em;}
	
	header {background-position: center 1em, center -9em, center 15em;
			background-size: auto, auto, 110%}
	
	#logoAndNavWrapper { 
	background-color: #3A475F; 
	padding: 1em;
	padding-left: 1.5em;
	height: 6.5em;
	}


h1.logo {/* width: 30%;*/ } /* added this */

.logo img { /* top left small logo */
	
	float: left; 
	width: 5em; }
	
	#homeNav {padding-top: 2em;
			padding-right: 1.5em;}
	#homeNav li{ /*adjusted the selector from 'nav li' to make it more specific*/
	display: inline;
	padding-left: 3em; /*I reduced this so the links wouldn't need to spill onto a second line at 320px. Also changed it from padding-right to padding-left. */
	font-size: 1.2em;
	}
	
	footer {
		font-size: .9em; }
	
	.aboutpage2 {padding-left: 1.1em;
				padding-top: .1em;}
	
	#servicespage {padding-left: 1.7em;}
	
	#mainbanner {display:none;}
	
	#largebanner {display:block;}
	
	.container {width: 950px;}
	
	.homeparagraph {font-size: 1.4em;
					padding-left: 10em;
					padding-right: 10em;}
}

@media screen and (min-width: 1600px) {
	
	#aboutback {
	background-position: center -30em, right 3em;	
	}
	
	.card5 {height: 25em;}
	.card6 {height: 25em;}
	.card4 {height: 25em;}
	.card2 {height: 25em;}
	.card {height: 24em;}
	.card3 {height: 24em;}
	
	.about2 {margin-left: 4em;
			margin-right: 9em;}
	
	#contact {background-size: 110%;}
}

@media screen and (min-width: 1800px) {
	
	.aboutpage2 {	
		font-size: 1.2em;
		padding-right: 5em;}
	
#directions {
				font-size: 1.2em;}
	
	.directionsh {
				font-size: 1.2em;
				}
	
	.info {font-size: 1.2em;
	}
	.info2 {font-size: 1.2em;}
	
	.about2 {
			font-size: 1.2em;
			padding-top: 1.5em;}
	
	#servicespage {font-size: 1.2em;}
	
	#contact {background-size: 100%;}
	
}

@media screen and (min-width: 2100px) {
	
	.teamwrapper {
				width: 75%;}
	
	#aboutback {
	background-position: center -80em, right -5em;	
	}
	
	.card5 {height: 27em;}
	.card6 {height: 27em;}
	.card4 {height: 27em;}
	.card2 {height: 27em;}
	.card {height: 26em;}
	.card3 {height: 26em;}
		
	#wrapper {width: 70%;
			}
	#serviceIcons2 div {  	
	height: 300px; 
	}
	
	#theteam h1 {
	padding-top: 14em;
	padding-bottom: 1.5em;}
	
	#serviceIcons2 div.vehicle img  { 
	margin-top: 6em;
} 
#serviceIcons2 div.shop img { 
	margin-top: 4.5em;	
}
#serviceIcons2 div.safety img {
	margin-top: 4.4em;
}
#serviceIcons2 div.marine img {
	margin-top: 5.8em;
}
#serviceIcons2 div.information img {
	margin-top: 3em;
}
#serviceIcons2 div.banners img {
	margin-top: 6.4em;
}
#serviceIcons2 div.exhibition img {
	margin-top: 5.3em;
}
#serviceIcons2 div.business img {width: 33%;
	margin-top: 4em;}
	

}


@media screen and (min-width: 2400px) {		
	
	.about2 {margin-left: 9em;
			margin-right: 15em;}
	
		
	
	#aboutback {
	background-position: center -80em, right -5em;	
	}
	
	.teamwrapper {width: 80%;}
	
	.card5 {height: 30em;}
	.card6 {height: 30em;}
	.card4 {height: 30em;}
	.card2 {height: 30em;}
	.card {height: 29em;}
	.card3 {height: 29em;}
}