@import url('header-footer.css');
@import url('menu.css');

.w320, .w360, .w480, .w640, .w768, .w1024 {display: none}

body{ font-family: Roboto Slab, san-serif, helvetica; margin: 0; overflow-x: hidden;}
.pageDataWrap {display: block; position: relative; }
.promoText{color:#514d6a;}
.break {display: none;}
.promoText b{color:#858585;}

@media screen and (max-width: 359px){
	#content { width: 290px;display: block;align-self: flex-start; float: none; margin:5px auto; margin-bottom: 0px;min-height: 500px;}
	.promoText {font-size:15px; line-height: 24px; padding: 3px;}
	.break.w320 {display: inline ;}
	#map{ margin-left: -260px;}
	body{ overflow: scroll;}
}
@media screen and (min-width: 360px)  and (max-width: 479px){
	#content { width: 330px;display: block;align-self: flex-start; float: none;  margin:5px auto; margin-bottom: 0px; min-height: 500px;}
	.promoText {font-size:15px; line-height: 25px; padding: 4px;}
	.break.w360 {display: inline ;}
	#map{ margin-left: -250px;}
}
@media screen and (min-width: 480px)  and (max-width: 639px){
	#content { width: 440px;display: block;align-self: flex-start; float: none; margin:5px auto; margin-bottom: 0px; min-height: 500px;}
	.promoText {font-size:15px; line-height: 25px; padding: 5px; }
	.break.w480 {display: inline ;}
	#map{ margin-left: -200px;}
}
@media screen and (min-width: 640px)  and (max-width: 767px){
	#content { width: 430px;display: inline-block;align-self: flex-start; float: none; margin:0 15px; margin-bottom: 0px; position: relative; border-left: 1px solid #b6b6b6;margin-left: -1px; min-height: 500px;}
	.promoText {font-size:15px; line-height: 25px; padding: 7px; margin-left: 20px;}
	.break.w640 {display: inline ;}
}
@media screen and (min-width: 768px)  and (max-width: 799px){
	#content { width: 530px;display: inline-block;align-self: flex-start; float: none; margin:0 20px; margin-bottom: 0px; position: relative; border-left: 1px solid #b6b6b6;margin-left: -1px; min-height: 500px; }
	.promoText {font-size:16px; line-height: 25px; padding: 8px;}
	.break.w768 {display: inline ;}
	.displayImageWrapper{margin-left: 50px;}
	.displayImage{width:250px;}
}
@media screen and (min-width: 800px)  and (max-width: 1023px){
	#content { width: 550px;display: inline-block;align-self: flex-start; float: none; margin:0 17px; margin-bottom: 0px; position: relative; border-left: 1px solid #b6b6b6;margin-left: -1px; min-height: 500px; }
	.promoText {font-size:16px; line-height: 25px; padding: 8px; margin-left: 20px;}
	.break.w800 {display: inline ;}
	.displayImageWrapper{margin-left: 50px;}
	.displayImage{width:275px;}
}
@media screen and (min-width: 1024px) and (max-width: 1199px){
	#content { width: 720px;display: inline-block;align-self: flex-start; float: none; margin:0 17px; margin-bottom: 0px; position: relative; border-left: 1px solid #b6b6b6;margin-left: -1px; min-height: 500px;}
	.promoText {font-size:16px; line-height: 25px; padding: 10px; margin-left: 30px;}
	.break.w1024 {display: inline; }
	.displayImageWrapper{margin-left: 75px;}
	.displayImage{width:385px;}
}
@media screen and (min-width: 1200px) and (max-width: 1365px){
	#content { width: 840px;display: inline-block;align-self: flex-start;float: none; margin:0 17px; margin-bottom: 0px; position: relative; border-left: 1px solid #b6b6b6;margin-left: -1px; min-height: 500px;}
	.promoText {font-size:16px; line-height: 25px; padding: 12px; margin-left: 20px;}
	.break.w1200 {display: inline ;}
	.displayImageWrapper{margin-left: 75px;}
	.displayImage{width:500px;}
}
@media screen and (min-width: 1366px){
	#content { width: 940px;display: inline-block;align-self: flex-start;float: none; margin:0 20px; margin-bottom: 0px; position: relative; margin-left: -1px; border-left: 1px solid #b6b6b6; min-height: 500px;}
	.promoText {font-size:16px; line-height: 25px; padding: 13px;}
	.break.w1366 {display: inline ;}
	.displayImageWrapper{margin-left: 200px;}
	.displayImage{width:500px;}
}


/* Production Page Display Image CSS*/
@media screen and (min-width: 768px){
	.displayImageWrapper{float: right;}
}
@media screen and (max-width: 767px){
	.displayImageWrapper{width: 100%;}
	.displayImage{width:80%;}
}


/* Map CSS */
#mapWrap {text-align: center; width: 100%; overflow: hidden; height: 450px;}
#map {height:450px;}