/* ------------------------iPHONE PLUSES (screen: 1080px maximum)-------------------------- */

@media only screen and (min-width: 751px) and (max-width: 1080px) {
	
/*---just to id width */	

	
/* Names at top */
#header {
	display: block;
	width: 100%;

	overflow: hidden;
	background-image: url("images/bluegrid.png");
	background-repeat: repeat-x;
}

#headwrapper h1 {
font-size: 1.8em;
	font-family: "Gill Sans", cursive;
	font-weight: normal;
margin-left: 15px;
margin-top: .5em;
margin-bottom: -.3em;
color: #ffffff;
text-shadow: .04em .04em .04em #666666;
letter-spacing: .05em;
	text-decoration: none;
}

#headwrapper h2 {
font-size: 1.1em;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #828282;
margin-left: 15px;
	font-weight: lighter;
letter-spacing: 0.04em;
}


#twocolcontainer {
	display: inline-block;
	width: 99%;
	padding-top: 20px;
	margin-bottom: 10px;
	margin: 0 auto;
}

#twocolCol1 {
	display: inline-block;
	width: 25%;
	margin-right: 1%;
	vertical-align: top;
	padding-right: 1%;
	text-align: left;
}

#twocolCol2 {
	display: inline-block;
	width: 65%;
	text-align: left;
	padding-left: 1%;
}

#twocolCol2  img {
	width: 90%;
	max-width: 900px;
	height: auto;
}



#featureh4 {
	text-align: left;
	padding-bottom: 10px;
	color: #828282;
	font-size: .9em;
}

#featureh4 li {
	text-align: left;
	padding-bottom: 10px;
	color: #828282;
	font-size: .9em;
}

#tcctable {
float: left;
	width: 90%;
	max-width: 900px;
	height: auto;
	font-size: .8em;
}

/* Top navigation menu */

.topnavwrapper {
	display: block;
	position: relative;
	width: 100%;
margin-top: -.85em;
}


.topnav a {
  float: left;
  display: block;
width: 120px;
  color: #828282;
  font-weight: lighter;
  text-align: center;
  padding: 4px 0px;
  text-decoration: none;
font-size: .75em;
}

.active {
  background-color: #ddf0ff;
  color: #828282;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
font-size: .75em;   
	font-weight: lighter;	
    border: none;
    outline: none;
	text-align: center;	
width: 120px;
	color: #828282;
    padding: 4px 0px;
    background-color: inherit;
    font-family: inherit;
	margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
width: 120px;
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: #828282;
width: 120px;
padding: 6px 6px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: #000000;
width: 108px;
}

.dropdown:hover .dropdown-content {
    display: block;
}
/* Common column settings */
	
.threecol .colmid {
	width:100%;
	border-right: none;
	right: 0;
}
	
.threecol .colleft {
	width:100%;				/* Width of the middle column */
	border-right: none;
	right: 0;
}
	
.threecol .col1 {
	width:47%;			/* Width of center column content (allowing 1% each side for padding) */
	left: 0;
	padding: 0 2% 0 1%;
	margin: 0 0;
	border-right: 1px solid #828282;
}
	
.threecol .col2 {
	width:46%;			/* Width of left column content */
	left: 0;
	padding: 0 1% 0 2%;
}
	
.threecol .col3 {
	float: clear;
	position: relative;
	display: inline-block;
	width:98%;			/* Width of right column content (column width minus padding on either side) */
	left: 0;
	margin: 0 1%;
	margin-bottom: 10px;
}


/* for gallery portfolio pages */
#onecol {
	width: 100%;
	display: block;
	padding-top: 20px;
}

#gallerywrapper {
	width: 90%;
	margin-left: 5%;
	max-width: 1080px;
	display: block;
	margin-bottom: 10px;
}



#whyme1 {
	width: 46%;
	float: left;
	margin: 0 2%;
}

#whyme2 {
	display: inline-block;
	width: 46%;
	margin: 0 2%;
}

.whyme {
	display: inline-block;
	width: 100%;
}

.whyme img {
	width: 45px;
	float: left;
	padding: 0 10px 10px 0;
}


#SIimage1 {
	display: none;
}

#SIimage2 {
	display: block;
	border: 1px solid black;
}


#sitemapplan {
	width: 90%;
}



/* footer items */

#email, #fbwrapper, #address, #phone, #linkedin {
	display: inline-block;
	width: 20%;
	text-align: center;
}
#email img, #fbwrapper img, #address img, #phone img, #linkedin img {
	display: block;
	width: 20%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2px;
	float: none;

}

#email h5, #fbwrapper h5, #address h5, #phone h5, #linkedin h5 {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 2px;
	text-align: center;
}


#copyright {
	width: 80%;
}

#copyright img {
	width: 12%;
}

/* For video */
video {
	width: 100%;
	height: auto;
}


}

/* ------------------------PHONE iPAD AND PHONE (screen: 750px maximum)-------------------------- */
@media only screen and (max-width: 750px) {

/* Names at top */

#header {	
text-align: center;			
min-height: 90px;
}

		#headwrapper h1 {
		font-size: 1.8em;
		margin-left: 0;
		margin-top: .5em;
		margin-bottom: -.3em;
	color: #ffffff;
		letter-spacing: .05em;
	text-shadow: .04em .04em .04 dem #444444;
		
		}

		#headwrapper h2 {
		font-size: 1.1em;
		margin-left: 0;
		letter-spacing: 0.04em;
		}
		
			
.rwd-line {
display: block;
}

.dot {
display: none;
}

.fullwidthfeature {
	 display: none;
 }

/* Top navigation menu */


.topnav {
  overflow: hidden;
  background-color: #3a90c7;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 4px 8px;
  text-decoration: none;
  font-size: 1em;
  width: 100px;
 
}

.dropdown-content a:visited {
  color: #3a90c7;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 1em;    
    border: none;
    outline: none;
    color: white;
    padding: 8px 8px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ddf0ff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	width: 100%;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 8px 8px;
    text-decoration: none;
    display: block;
    text-align: left;
	width: 100%;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }

 
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  
/* Conversion of 3-col elastic frames to 1-col stacked */
/* Common column settings */
	
.threecol .colmid {
	width:100%;
	border-right: none;
	right: 0;
}
	
.threecol .colleft {
	width:100%;
	border-right: none;
	right: 0;
}
	
.threecol .col1 {
width:96%;			/* Width of center column content (allowing 1% each side for padding) */
	left: 0;
padding: 0 2% 0 2%;
	margin: 0 0;
border-right: none;
}
	
.threecol .col2 {
width:96%;			/* Width of left column content */
	left: 0;
padding: 0 2% 0 2%;
}
	
.threecol .col3 {

	width:96%;			/* Width of right column content (column width minus padding on either side) */
	left: 0;
	padding: 0 2% 20px 2%;
}

/* for gallery portfolio pages */
#onecol {
	width: 100%;
	display: block;
	padding-top: 10px;
}

#gallerywrapper {
	width: 90%;
	margin-left: 5%;
	max-width: 750px;
	display: block;
	margin-bottom: 10px;
}

.ug-lightbox .ug-lightbox-arrow-left,
.ug-lightbox .ug-lightbox-arrow-right {
	background-image:url('unitegallery/images/lightbox-arrow-left.png');
}

.ug-lightbox .ug-lightbox-arrow-right{
	background-image:url('unitegallery//images/lightbox-arrow-right.png');
}

#whyme1 {
	display: block;
	width: 90%;
	float: left;
	margin: 0 5%;
}

#whyme2 {
	display: block;
	width: 90%;
	margin: 0 5%;
}

.whyme {
	display: block;
	width: 100%;
}

.whyme img {
	width: 45px;
	float: left;
	padding: 0 10px 10px 0;
}

#SIimage1 {
	display: none;
}

#SIimage2 {
	display: block;
	max-width: 750;
	border: 1px solid black;
}

#sitemapplan {
	width: 100%;
}


/* footer items */
#email, #fbwrapper, #address, #phone, #linkedin {
	display: block;
	width: 100%;
	text-align: left;
}
#email img, #fbwrapper img, #address img, #phone img, #linkedin img {
	
	width: 40px;
	margin: 10px 5px 5px 10px;
	float: left;
}

#email h5, #fbwrapper h5, #address h5, #phone h5, #linkedin h5 {
	margin-left: 5px;
	margin-right: 5px;
	text-align: left;
}

#clienticons {
	display: none;
}
/* copyright */

#copyright {
	display: block;
	float: none;
	text-align: left;
	width: 98%;
}

#copyright img {
width: 15%;
	float: left;
	margin-left: 10px;
	margin-right: 5px;
	margin-bottom: 5px;
}

#copyright p {
	text-align: left;
	margin-left: 10px;
}
	
#bestviewed {
	width: 97%;
	float: none;
	text-align: left;
	margin-left: 10px;
}

/* For form, resume page */

#twocolcontainer {
display: block;
	width: 99%;
	padding-top: 20px;
	margin-bottom: 10px;
	margin: 0 auto;
}

#twocolCol1 {
	display: block;
	width: 70%;
	margin: 0 14%;
	vertical-align: top;
}

#twocolCol2 {
	display: block;
	width: 96%;
	text-align: center;
	margin: 0 1%;
}

#twocolCol2  img {
width: 97%;
	margin: 0 1%;
text-align: center;
max-width: 750px;
	height: auto;
}


#tcctable {
	float: none;
	width: 97%;
	margin: 0 1%;
max-width: 750px;
	height: auto;
	font-size: .8em;
}

#designdoc {
	width: 90%;
	margin-left: 5%;
}

/* For video */
video {
	width: 100%;
	height: auto;
}

}




/* ------------------------TINY PHONES (screen: 500px maximum)-------------------------- */
@media only screen and (max-width: 500px) {

/* Names at top */

		#header {	
text-align: center;			
min-height: 90px;
		}

		#headwrapper h1 {
			color: #f9f9f9;
			font-weight: normal;
		font-size: 1.4em;
		margin-top: 1em;
		letter-spacing: 0;
				margin-left: 0;
		}

		#headwrapper h2 {
		font-size: .9em;
		margin-left: 0;
		letter-spacing: 0.04em;
		line-height; 1em;
		margin-bottom: 10px;
		}
		
/* Conversion of 3-col elastic frames to 1-col stacked */
  .colright,
  .colmid,
  .colleft {
	  float: none;
	  width: 100%;
	  position: static;
  }
  .col1,
  .col2,
  .col3 {
	  float: none;
	  width: 100%;
	  position: static;
	  background: #ffffff;
  }
  
.threecol .col1,
.threecol .col2,
.threecol .col3 {
	width: 100%;
	margin: 0 0;
	left: clear;	
}		

/* for gallery portfolio pages */
#onecol {
	width: 100%;
	display: block;

}

#gallerywrapper {
	width: 100%;
	display: block;
	margin-bottom: 10px;
}

#gallery {
	width: 97%;

}

#clienticons {
	display: none;
}

.ug-lightbox .ug-lightbox-arrow-left,
.ug-lightbox .ug-lightbox-arrow-right {
	background-image:url('unitegallery/images/lightbox-arrow-left.png');
}

.ug-lightbox .ug-lightbox-arrow-right{
	background-image:url('unitegallery//images/lightbox-arrow-right.png');
}

.whyme img {
	width: 45px;
	float: left;
	padding: 0 10px 5px 0;
}

.whyme {
	padding-bottom: 10px;
}

#SIimage1 {
	display: block;
	max-width: 450px;
	border: 1px solid black;
}

#SIimage2 {
	display: none;
}

#twocolCol1 {
	display: block;
width: 90%;
	margin: 0 4%;
	vertical-align: top;
}

#twocolCol2 {
	display: block;
	width: 96%;
	text-align: center;
	margin: 0 1%;
}

#twocolCol2  img {
width: 97%;
	margin: 0 1%;
text-align: center;
max-width: 500px;
	height: auto;
}


#tcctable {
	float: none;
	width: 96%;
	margin: 0 2%;
max-width: 750px;
	height: auto;
	font-size: .8em;
overflow: auto;
}

#designdoc {
	width: 90%;
	margin-left: 5%;
}
#designdoc {
	width: 95%;
	margin-left: 2%;
}

#sitemapplan {
	width: 100%;
}

#copyright img {
width: 20%;
	float: left;
	margin-left: 10px;
	margin-right: 5px;
	margin-bottom: 5px;
}

}

@media print {
	
	
	body {
		background: white;
	}
	
	h1, h2, h3, h4 {
		font-size: 12pt;
		font-style: bold;
		color: black;
	}
	
	p {
		font-size: 10pt;
		color: black;
		
	}
	
	head, #header, .topnavwrapper {
		display: none;
	}
	
	#website {
		width: auto;
		border: 0;
		margin: 0 5%;
		padding: 0;
		float: none;
	}
	
a[href^="http://"]:after, a[href^="ftp://"]:after {
  content: " (" attr(href) ")";
  color: blue;
  font-size: small;
}

/* For video */
video {
	width: 100%;
	height: auto;
}

}