@charset "UTF-8";
/* CSS Document */

/*
*
*  Golden Grid System (1.01)	<http://goldengridsystem.com/>
*  by Joni Korpi 				<http://jonikorpi.com/>
*  licensed under MIT			<http://opensource.org/licenses/mit-license.php>
*	
*/
/*
*
*  Margin, padding, and border resets
*  except for form elements
*
*/
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0;
}
/*
*
*  Consistency fixes
*  adopted from http://necolas.github.com/normalize.css/
*
*/
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  min-height: 100%;
  font-size: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
audio,
canvas,
video {
  display: block;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
b, strong {
  font-weight: bold;
}
abbr[title] {
  border-bottom: 1px dotted;
}
input,
textarea,
button,
select {
  margin: 0;
  font-size: 100%;
  line-height: normal;
  vertical-align: baseline;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
input[type="checkbox"], input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* GH added for contact form mobile styling 
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {
  -webkit-appearance: none; -moz-appearance: none;
  display: block;
  margin: 0;
  width: 100%; height: 40px;
  line-height: 40px; font-size: 17px;
  border: 1px solid #bbb;
} */

textarea {
  overflow: auto;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
	border-color:#639;
} 
/*
*
*  Simple fluid media
*
*/
figure {
  position: relative;
}
figure img,
figure object,
figure embed,
figure video {
  max-width: 100%;
  display: block;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
  height:auto;
}
/*
*
*	Zoomable baseline grid
*	type size presets
*
*/
body {
  font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 1em;   /* 16px / 24px */
  line-height: 1.5em;

}
.small {
  font-size: 0.8125em;  /* 13px / 18px */
  line-height: 1.3846153846153846em;
}

h4 {
  font-size: .9em;  /* 14.4px / 16px */
  line-height: 1.1em;  /* 24 */
  font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-weight:normal;
}
.normal, h3 {
  font-size: 1em;  /* 16px / 24px */
  line-height: 1.5em;  /* 24 */
  font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  color: #0e4537;

}
.large, h2, h1 {
  font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  color: #0e4537;
  font-size: 1.25em;   /* 20 / 16px */
  line-height: 1.28em; /* 26 / 36px */
}
.huge {
  font-size: 2.625em;   /* 42px / 48px */
  line-height: 1.1428571428571428em;
}
.massive {
  font-size: 4.25em;   /* 68px / 72px */
  line-height: 1.0588235294117647em;
}
.gigantic {
  font-size: 6.875em;   /* 110px / 120px */
  line-height: 1.0909090909090908em;
}
 
.pgTitleHolder{ /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	/*float:left; 			/* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:.5em; 			/* use this line to position an element */
	left:2%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:97%; 			/* if this is set to a number, all following content will move right this much. */
	z-index:5;
	
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	
} 
 
.pgTitle {
	/*height:250px; 		/* set these when the holder height and width are set to 0 for fake absolute positioning */
	width:100%;  			/* set these when the holder height and width are set to 0 for fake absolute positioning */
	padding: .3em 0em .2em 0em;
	border-radius: .5em 0px 0px 1.875em;
	font-size: 1.5em;   /* 42px / 48px */
	line-height: 1.0428571428571428em;
	} 
 
.iconHome {
	float:left;
	height: 15%;
    width: 15%;
	margin-right:1%;
	padding: 0em 0em 0em 0em;
	/*display:inline; */
} 
 
a:link {
color:black;
/*background-color:#b4a1bb;*/
/*text-decoration:none; */
}
a:visited {
	color:#3d3d3d;
}

.fbHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:left; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:0px; 			/* use this line to position an element */
	left:0px; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:100%; 			/* if this is set to a number, all following content will move right this much. */
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 40% !important; height: 100% !important; display:block;z-index:2000;position:absolute; top:0em; left:0em;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 100% !important;display:block;z-index:2000;position:absolute;top:0em; left:0em;}

.twitterHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:.5em; 			/* use this line to position an element */
	left:5%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:90%; 		/* if this is set to a number, all following content will move right this much. */
	display: none;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}


#twitterHead{
	left:0px;
	width:200px;
	height:80px;
	border:0px;
	vertical-align:top;
	background:url('images/LG_Twitter_Header.png') 0px 0px;
}

#twitter_update_list{
	margin: 0px 0px 0px 0px;
	padding: 0px .3em .3em .3em;
	background:#FFFFFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: .8em;
	line-height: 1em;
	width:189px;
	height:auto;
	/*border: thin solid #EEE;*/
}
#twitter_update_list li {
list-style-type: none;
}

#twitter_update_list span {
color:#330;
/*background: #000000;*/
}

/* Twitter API Link styling */
#twitter_update_list a:link {text-decoration: none;color:#36F;}
#twitter_update_list a:visited {text-decoration: none;color:#36F;}
#twitter_update_list a:hover {text-decoration: none;color:#888;}


/* Link styling on our tweets */
#twitter_update_list span a:link {display: inline;color: #36F;}
#twitter_update_list span a:visited {display: inline;color: #36F;}
#twitter_update_list span a:hover {text-decoration: underline;color: #818081;}

#twitterFooter{
	font-family: Verdana, Geneva, sans-serif;
	font-size: .6em;
	line-height: 1em;
	left:0px;
	width:200px;
	height:40px;
	border:0px;
	vertical-align:top;
	background:url('images/LG_Twitter_Footer.png') 0px 0px;
}
#twitterFooter a{
	left:0px;
	padding: 0px 0px 0px 50px;
}



/*
*
*  Four-column grid active
*  ----------------------------------------
*  Margin   | #  1   2   3   4   |   Margin
*  5.55555% | %  25  50  75  100 | 5.55555%
*
*/


#pg1 {
	position:relative;
	left: 0px;
	top: 0px;
	height:30em;
	width:100%;
	padding: 0em 0em 3em 0em;
	background:rgba(185,187,200,1); /* this let's me set the color and transparency of the background only. NOT the text. */
}

.pg1_IMG {
	height: 20px;
    width: 20px;
	background-color:#93F;
}

.mainbkgrd {
	/*position:absolute;
	left: 0px;
	top: 0px; */
	z-index: -10;
	max-width:100%;
	background-image: url("images/main845x1012.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:right bottom;
	/*background-size: 20em 30em; /* 320 x 480 */
	min-height:100%;
	/*height:auto; */
}


.phone {
	float:right;
	margin: .425em 1.25em 0em 0px;
	font-family: "Eras Demi ITC", Herculanum, sans-serif;
	font-size: .8em; 
	color:#6a2a7e;
	/*z-index: 10; */
}

.mainmenu {
	float:right;
	margin: .525em 0px 0px .8em;
	background-color:#b4a1bb;
	color:#3d3d3d;
	border-radius: .5em 0px 0px 1.875em;
	font-size: 1.0em;   /* 28px / 16px */
	line-height: 1.1846153846153846em; /* 26 / 36px */
	height:auto;
	width: 90%;
}

img.menuHome {
	float:left;
	height: 21%;
    width: 21%;
	margin-right:1%;
	padding: 0px;
	/*display:inline; */
}

ul#menu li {
    display:inline;
	float:left;
	margin-right: 10px;
	padding-right: 10px;
}

.mainmenu a:link {
color:black;
/*background-color:#b4a1bb;*/
text-decoration:none;
}
.mainmenu a:visited {
	color:#3d3d3d;
}

.pg2 {
	position:relative;
	padding: 0em 0em 3em 0em;
	/*float:left;
	left: 0px; */
	/*background-color:#696;
	height: 75%;
	/*top: 3000px; */
}

#pricesTitle{
background:rgba(158,158,158,.5); /* this let's me set the color and transparency of the background only. NOT the text. */
}

.diamondIMG {
	height: auto;
    width: 100%;
	margin-right:0%;
	padding: 0px;
}
.level_list, .carat_range, .price_each, .qty2ormore {
	float:left;
	/*margin-right: .5em; */
	width: 25%;
}

ul#level li, ul#cr li, ul#pe li, ul#qty li {
    list-style-type: none;
	font-size: .9em;
}

.diamondnote {
	width = 200px;
	padding: 0 30px;
}


header, #twoway {
  margin: 0 5.555555555555555%;

}
h1, h2 {
  margin: 0.9230769230769231em 0 1.3846153846153846em;
}
h2 {
  font-weight: normal;
}
h3 {
  margin: 1.5em 0 1.5em;
  font-weight: normal;
}

.req {
	color:#E00;
}
/*
*  Simple elastic gutters
*  Note: box-sizing will not work in IE6-7
*/
.wrapper {
  padding: 0 0.75em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.mainstatement {
    float: right;
    width: 81.875%; /* 230px / 320px */
	/* background-color:#6C0;
    /*height: 190px; */
    margin: 0px 4% 0px 15%;
	padding: 4.125% 0px 0px 0px;
}

.substatement {
    float: left;
    width: 81.875%; /* 230px / 320px */
	/* background-color:#6C0;
    /*height: 190px; */
    margin: 0px 4% 0px 15%;
	padding: 2.125% 0px 0px 0px;
}

#mainText { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:left; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:0px; 			/* use this line to position an element */
	left:0px; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:94%; 			/* if this is set to a number, all following content will move right this much. */
	display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	margin: 18em 0em 2em 0em;
	padding: 0 3%;
}

.pg3 {
	position:relative;
	top:0px;
	left:0px;		
	height: 100%;
    width: 100%;
	padding: 0em 0em 3em 0em;

}

#labTitle{
background:rgba(44,191,246,.5); /* this let's me set the color and transparency of the background only. NOT the text. */
}

.labIMG {
	height: auto;
    width: 100%;
	max-width:100%;
	margin-right:0%;
	padding: 4.1667% 0px 0% 0px; /* this is for my color bar to separate content, images, etc. */
	background:rgba(8,108,159,1); /* this let's me set the color and transparency of the background only. NOT the text. */
}

#labTextholder1 { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	/*float:left; 			/* use this line to position an element */
	/*position:absolute; 	/* use this line to position an element */
	top:20px; 			/* use this line to position an element */
	left:20px; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:100%; 			/* if this is set to a number, all following content will move right this much. */
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}

#labText1{
	/*height:250px; 		/* set these when the holder height and width are set to 0 for fake absolute positioning */
	/*width:50px;  			/* set these when the holder height and width are set to 0 for fake absolute positioning */
	background:rgba(8,108,159,1); /* this let's me set the color and transparency of the background only. NOT the text. */
	line-height: 1.3em;
	padding: .7em;
}

#howtoTitle{
background:rgba(188,33,146,.5); /* this let's me set the color and transparency of the background only. NOT the text. */
}
#howtoText1 a:link {
color:white;
/*background-color:#b4a1bb;*/
/*text-decoration:none; */
}
#howtoText1 a:visited {
	color:#609;
	text-decoration:underline;
}

.HowToIMG {
	height: auto;
    width: 100%;
	max-width:100%;
	margin-right:0%;
	padding: 4.1667% 0px 2% 0px; /* this is for my color bar to separate content, images, etc. */
	background:rgba(106,84,100,1); /* this let's me set the color and transparency of the background only. NOT the text. */
	background: -webkit-linear-gradient(rgba(106,84,100,1), rgba(106,84,100,.7)); /* For Safari 5.1 to 6.0 */
  	background: -o-linear-gradient(rgba(106,84,100,1), rgba(106,84,100,.7)); /* For Opera 11.1 to 12.0 */
  	background: -moz-linear-gradient(rgba(106,84,100,1), rgba(106,84,100,.7)); /* For Firefox 3.6 to 15 */
  	background: linear-gradient(rgba(106,84,100,1), rgba(106,84,100,.7)); /* Standard syntax */
}

#howtoTextholder1 { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	/*float:left; 			/* use this line to position an element */
	/*position:absolute; 	/* use this line to position an element */
	top:0px; 			/* use this line to position an element */
	left:0px; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:100%; 			/* if this is set to a number, all following content will move right this much. */
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}

#howtoText1{
	/*height:250px; 		/* set these when the holder height and width are set to 0 for fake absolute positioning */
	/*width:50%;  			/* set these when the holder height and width are set to 0 for fake absolute positioning */
	background:rgba(106,84,100,.7); /* this let's me set the color and transparency of the background only. NOT the text. */
	line-height: 1.3em;
	padding: .7em;
}

#contactTitle{
background:rgba(24,113,17,.5); /* this let's me set the color and transparency of the background only. NOT the text. */
}


/*
*
*  Fixes for IE6-8
*  http://jonikorpi.com/leaving-old-IE-behind/
*
*/
.ie body {
  width: 40em;
  margin: 0 auto;
  font-size: 1.0625em;
}
.ie h1 {
  font-size: 2.625em;  /* 42px / 48px */
  line-height: 1.1428571428571428em;
  margin: 1.1428571428571428em 0 0.5714285714285714em;
}

/* iphone5 in landscape  --------------------- */
@media screen and (orientation: landscape) {
#pg1 {
	height:20em;
	width:100%;
}

.mainmenu{
	font-size: 1.25em;
}
  
.substatement {
	position:relative;
	top: -2.25em;
	left: 7%;
    /*float: right; */
    width: 50%; /* 230px / 320px */
}

.mainbkgrd {
/*	left: 0px;
	top: 0px; */
	background-image: url("images/main1024x768.png");
/*	max-width: 100%;
  	background-size: cover;  /* 576 x 320 */
}

#mainText { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:left; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:0px; 			/* use this line to position an element */
	left:0px; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:95%; 			/* if this is set to a number, all following content will move right this much. */
	display: inline;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	padding: 0 1em 0 1em;
	margin: 10em 0em 2em 0em;
}

.phone {
	margin: .025em 1.25em 0em 0px;
}

.mainmenu {
	width: 90%;
	height:auto;
}
img.menuHome {
	height: 9%;
    width: 9%;
}

.diamondIMG {
	height: auto;
    width: 75%;
}

.level_list, .carat_range, .price_each, .qty2ormore {
	/*margin-right: 1.5em; */
}

.qty2ormore {
	/*margin-right: 20%; */
}

ul#level li, ul#cr li, ul#pe li, ul#qty li {
	font-size: 1.1em;
}

.iconHome {
	float:left;
	height: 10%;
    width: 10%;
	margin-right:1%;
	padding: 0em 0em 0em 0em;
	/*display:inline; */
} 

.twitterHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-100%; 			/* use this line to position an element */
	left:55%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:40%; 			/* if this is set to a number, all following content will move right this much. */
	display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}

/*/mediaquery*/
}

/* iphone 6  portrait  --------------------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) {
#pg1 {
	height:43.6875em;
	width:100%;
}

.mainmenu{
	font-size: 1.25em;
}
  

.substatement {
    width: 40%; /* 230px / 320px */
	/* background-color:#6C0;
    /*height: 190px; */
    margin: 0px 46% 0px 14%;
}

.mainbkgrd {
	left: 0px;
	top: 0px;
	max-width: 100%;
	min-height:80%;
  	/*background-size: 90% auto;  /* 576 x 320 */
}
}

/* iphone 6  landscape  --------------------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape){
#pg1 {
	height:23em;
	width:100%;
}

.mainbkgrd {
	left: 0px;
	top: 0px;
	background-image: url("images/main1024x768.png");
	max-width: 100%;
  	background-size: cover;  /* 576 x 320 */
}

.substatement {
	position:relative;
	top: 0em;
	left: 0em;
    width: 50%;
}

#labTextholder1 { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	/*float:left; 			/* use this line to position an element */
	position:absolute; 	/* use this line to position an element */
	top:-3em; 			/* use this line to position an element */
	left:10%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:100%; 			/* if this is set to a number, all following content will move right this much. */
}

#labText1{
	/*height:250px; 		/* set these when the holder height and width are set to 0 for fake absolute positioning */
	/*width:50px;  			/* set these when the holder height and width are set to 0 for fake absolute positioning */
	background:rgba(153,204,204,.6); /* this let's me set the color and transparency of the background only. NOT the text. */
	/*line-height: 1.3em;
	padding: .7em; */
}
}

/* iPhone 6+ portrait  --------------------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait){
#pg1 {
	height:48em;
	width:100%;
}
}

/* iPhone 6+ landscape --------------------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape){
#pg1 {
	height:25.875em;
	width:100%;
}

.mainbkgrd {
	left: 0px;
	top: 0px;
	background-image: url("images/main1024x768.png");
	max-width: 100%;
  	background-size: cover;  /* 576 x 320 */
}
}

/* iPads (portrait) --------------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
#pg1 {
	height:62em;
	width:100%;
}

.mainmenu {
	width: 90%;
	height:auto;
}

img.menuHome {
	height: 9%;
    width: 9%;
}

.diamondIMG {
	height: auto;
    width: 60%;
}
.mainstatement {
    width: 39%; /* 230px / 320px */
	/* background-color:#6C0;
    /*height: 190px; */
    margin: 0px 8% 0px 52%;
	padding: 8.125% 0px 0px 0px;
}

.substatement {
    float: left;
    width: 39%; /* 230px / 320px */
	/* background-color:#6C0;
    /*height: 190px; */
    margin: 0px 0% 0px 52%;
	padding: 2.125% 0px 0px 0px;
}

#mainText { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:left; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-9em; 			/* use this line to position an element */
	left:52%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:44%; 			/* if this is set to a number, all following content will move right this much. */
	display:block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	margin: 10em 0em 2em 0em;
	z-index:3;
}

.iconHome {
	float:left;
	height: 10%;
    width: 10%;
	margin-right:1%;
	padding: 0em 0em 0em 0em;
	/*display:inline; */
} 

.fbHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-90%; 			/* use this line to position an element */
	/*left:12%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:auto; 			/* if this is set to a number, all following content will move right this much. */
	padding-left: 12%;
	/*display:block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 25% !important; height: 100% !important; display:block;z-index:2;position:absolute; top:0em; left:0em;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 25% !important;display:block;z-index:2;position:absolute;top:0em; left:0em;}

.twitterHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-50%; 			/* use this line to position an element */
	left:55%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:40%; 			/* if this is set to a number, all following content will move right this much. */
	display: none;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}
}

/* iPads (landscape) --------------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
#pg1 {
	height:44em;
	width:100%;
}

.mainstatement {
    float: right;
    width: 50%;
    margin: 0px 36% 0px 10%;
	padding: 4.125% 0px 0px 0px;
}

.substatement {
	position:relative;
	top: 0em;
	left: -.50em;
    width: 50%;
}

#mainText { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:left; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-9em; 			/* use this line to position an element */
	left:13%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:75%; 			/* if this is set to a number, all following content will move right this much. */
	display:block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	margin: 10em 0em 2em 0em;
}

.mainbkgrd {
	left: 0px;
	top: 0px;
	background-image: url("images/main1024x768.png");
	max-width: 100%;
  	background-size: cover;  /* 576 x 320 */
}

.diamondIMG {
	height: auto;
    width: 50%;
}

.iconHome {
	float:left;
	height: 8%;
    width: 8%;
	margin-right:1%;
	padding: 0em 0em 0em 0em;
	/*display:inline; */
} 

.twitterHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-50%; 			/* use this line to position an element */
	left:55%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:40%; 			/* if this is set to a number, all following content will move right this much. */
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* Desktops and laptops -----------  (added the landscape criteria because it was affecting ipad portrait mode */
@media only screen  and (min-width : 750px) and (max-width : 1020px) and (orientation : landscape) {
#pg1 {
	height:50em;
	width:100%;
}

img.menuHome {
	height: 9%;
    width: 9%;
}

.substatement {
	position:relative;
	top: 0em;
	left: 0%;
    /*float: right; */
    width: 50%; /* 230px / 320px */
}

.diamondIMG {
	height: auto;
    width: 50%;
}

.pgTitleHolder{ /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	/*float:left; 			/* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:0em; 			/* use this line to position an element */
	left:2%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:97%; 			/* if this is set to a number, all following content will move right this much. */
	z-index:5;
	
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	
} 
 
.pgTitle {
	/*height:250px; 		/* set these when the holder height and width are set to 0 for fake absolute positioning */
	width:100%;  			/* set these when the holder height and width are set to 0 for fake absolute positioning */
	padding: .3em 0em .2em 0em;
	border-radius: .5em 0px 0px 1.875em;
	font-size: 2.025em;   /* 42px / 48px */
	line-height: 1.0428571428571428em;
	} 
 
.iconHome {
	float:left;
	height: 8%;
    width: 8%;
	margin-right:1%;
	padding: 0em 0em 1em 0em;
	/*display:inline; */
} 

}

/* Desktops and laptops ----------- this section rules out ipads but keeps in small desktop users */
@media only screen  and (min-width : 1025px) {
/*  header, #twoway {
    margin: 0 5.555555555555555%;
  }
  header .wrapper {
    width: 37.5%;
    margin-left: 25%;
  }
  #twoway .wrapper {
    width: 25%;
  }
  */
 
	
#pg1 {
	height:54em;
	width:100%;
}

.mainbkgrd {
	left: 0px;
	top: 0px;
	background-image: url("images/main1024x768_computer.png");
	max-width: 100%;
  	background-size: cover;  
}

.substatement {
	position:relative;
	top: 0em;
	left: 0%;
    /*float: right; */
    width: 50%; /* 230px / 320px */
}

#mainText { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:left; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-9em; 			/* use this line to position an element */
	left:49%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:44%; 			/* if this is set to a number, all following content will move right this much. */
	display:block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	margin: 10em 0em 2em 0em;
	z-index:3;
}

.diamondIMG {
	height: auto;
    width: 40%;
}

.pgTitleHolder{ /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	/*float:left; 			/* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:0em; 			/* use this line to position an element */
	left:2%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:97%; 			/* if this is set to a number, all following content will move right this much. */
	z-index:5;
	
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
} 
 
.pgTitle {
	/*height:250px; 		/* set these when the holder height and width are set to 0 for fake absolute positioning */
	width:100%;  			/* set these when the holder height and width are set to 0 for fake absolute positioning */
	padding: .3em 0em .2em 0em;
	border-radius: .5em 0px 0px 1.875em;
	font-size: 2.025em;   /* 42px / 48px */
	line-height: 1.0428571428571428em;
	} 
 
.iconHome {
	float:left;
	height: 8%;
    width: 8%;
	margin-right:1%;
	padding: 0em 0em 0em 0em;
	/*display:inline; */
} 

.fbHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-92.5%; 			/* use this line to position an element */
	left:12%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:auto; 			/* if this is set to a number, all following content will move right this much. */
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 40% !important; height: 84% !important; display:block;z-index:2;position:absolute; top:0em; left:0em;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 100% !important;display:block;z-index:2;position:absolute;top:0em; left:0em;}

.twitterHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-155.5%; 			/* use this line to position an element */
	left:30%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:auto; 			/* if this is set to a number, all following content will move right this much. */
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	z-index:3;
}

.mainstatement {
    width: 41%; /* 230px / 320px */
	/* background-color:#6C0;
    /*height: 190px; */
    margin: 0px 9% 0px 50%;
	padding: 4.125% 0px 0px 0px;
}

.substatement {
    float: left;
    width: 41.0%; /* 230px / 320px */
	/* background-color:#6C0;
    /*height: 190px; */
    margin: 0px 9% 0px 50%;
	padding: 2.125% 0px 0px 0px;
}
 
.pgTitle {
	/*height:250px; 		/* set these when the holder height and width are set to 0 for fake absolute positioning */
	width:100%;  			/* set these when the holder height and width are set to 0 for fake absolute positioning */
	padding: .3em 0em .2em 0em;
	border-radius: .5em 0px 0px 1.875em;
	font-size: 1.5em;   /* 42px / 48px */
	line-height: 1.0428571428571428em;
	} 
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1400px) {

.fbHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-90%; 			/* use this line to position an element */
	left:12%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:auto; 			/* if this is set to a number, all following content will move right this much. */
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
}

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 40% !important; height: 84% !important; display:block;z-index:2;position:absolute; top:0em; left:0em;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 100% !important;display:block;z-index:2;position:absolute;top:0em; left:0em;}

.twitterHOLDER { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:none; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-153%; 			/* use this line to position an element */
	left:30%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:auto; 			/* if this is set to a number, all following content will move right this much. */
	/*display: block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	z-index:3;
}

.substatement {
	position:relative;
	top: -2em;
	left: 0%;
    /*float: right; */
    width: 50%; /* 230px / 320px */
}

#mainText { /* This container allows me to position content WITHOUT affecting the up/down or left/right flow of following content.  Moves it out of the flow without using position:absolute which causes hyperlink problems. */
	float:left; /* use this line to position an element */
	position:relative; 	/* use this line to position an element */
	top:-11em; 			/* use this line to position an element */
	left:49%; 			/* use this line to position an element */
	height:auto; 			/* if this is set to a number, all following content will move down this much. */
	width:44%; 			/* if this is set to a number, all following content will move right this much. */
	display:block;			/* set this to none, block, or inline depending on if you want the contents to show for a viewport or not. */
	margin: 10em 0em 2em 0em;
	z-index:3;
}
.iconHome {
	float:left;
	height: 8%;
    width: 8%;
	margin-right:1%;
	padding: 0em 0em 1em 0em;
	/*display:inline; */
} 
}

@media only screen  and (min-width : 1600px) {
	
	.mainbkgrd {
	left: 0px;
	top: 0px;
	background-image: url("images/main1600x920_computer.png");
	max-width: 100%;
  	background-size: cover;  
}

}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}