/* Responsive Index CSS Document */

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

@font-face {
	font-family: "Agency FB";
	src: url(../fonts/AGENCYR.TTF);
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 22, 2014 */
@font-face {
    font-family: 'architechregular';
    src: url('../fonts/architech-webfont.eot');../../architech-webfont.eot);
    src: url('../fonts/architech-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/architech-webfont.woff2') format('woff2'),
         url('../fonts/architech-webfont.woff') format('woff'),
         url('../fonts/architech-webfont.ttf') format('truetype'),
         url('../fonts/architech-webfont.svg#architechregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Notes are on replacing pixel based sizes for fluid, more responsive sizings by converting pixel units to 
em and % units. This example uses a document body max-width of 1024px */
body {
	background: #2222A0;
	color: #422E82;
	margin: 0px auto;
	padding: 0;
	max-width: 64em; /* (static size of 1024px)1024px / 16(default static font browser's size) = 64(new fluid size) */
	line-height: 1.5;
	font-size: 16px;
	font-family: "Arial Narrow", Arial, sans-serif;
}

img {max-width: 100%;}

#content-container {
	margin: 0 auto;
	width: 90%;
	background: #F0E6FF;
box-shadow:0px 0px 35px 5px rgba(176,224,230,.7);
   -moz-box-shadow:0px 0px 35px 15px rgba(176,224,230,.7);
-webkit-box-shadow:0px 0px 35px 5px rgba(176,224,230,.7);				
}

#content-wrapper {
	box-shadow: inset 0 0 25px 5px rgba(135,206,235,1);
   -moz-box-shadow: inset 0 0 25px 10px rgba(135,206,235,1);
-webkit-box-shadow:inset 0 0 25px 10px rgba(135,206,235,1);
}

#header {
	width:100%;
	margin: 0 auto;
}

#logo img {
	float: left;
	width:15.625%;
	margin: 3em 0 0 2em;
	max-width:150px;
	min-width:100px;
}

#header_title {
	width:100%;
	margin: 0 auto;
	padding: 0em 0;
}

#header_title h1	{
	margin:0 auto;
	text-align:center;
	font-family: magentaregular;
	color: #422E82;
	text-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	width: 95%;
}

#content {
	width: 100%;
	padding: 0;
	margin: 0 auto;
}

#content h1 {
	font-family: magentaregular; AddSpeedy, "Enter Sansman";
	color: #1F0F54;
	text-align: center;
}

.moto {
	width: 95%;
	margin: 0 auto 1em;
	padding: 0;
	font-family: "Agency FB", sans-serif;
}

.moto blockquote {
	font-size:140%;
	letter-spacing:1px;
	line-height: 1.5;
}
.lwname {font: 125% architechregular;}

#content p {
	padding: 0;
	margin:0 auto;
	clear:both;
	width:85%;
	font-size:110%;
	font-family: "Agency FB", sans-serif;
}

.clear {clear:both; line-height:1px;}
.clear-fix {clear: both; line-height: 1px; }

/* ======================================= PROMO AREA START ======================================= */

.promo_container {
	max-width: 95%;
	padding: 5px 0 5px 5px;
	margin: 3.5em auto 2.5em;
	background: #FFFCE4 url(../img/fffce4_f6e7ff-8x8_8x8.png) repeat 0 0;
	border: solid 1px #2222A0;
	border-radius: 6px;
}

.promo_container .promo {
	width: 33%;
	float: left;
	background-position: 0 6px;
}

.promo_container .promo .promo-content { padding: 0 10px 10px 160px; }

.promo h3 { font-family:Raleway; font-size: 1.1em; margin: 0; } 
.promo p { font-family:Raleway; line-height: 1.2em; font-size: .9em; margin-bottom: .5em; }

.promo { background-repeat: no-repeat; }
.promo.one { background-image: url(../img/devices-0150.png); }
.promo.two { background-image: url(../img/Logo_Lable-0150.png); }
.promo.three { background-image: url(../img/dblexpose.png); }


nav a {
	color: #f5a06e;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	font-weight: bold;
	font-size: .9em;
}
nav a:hover { color: #fff; }

.clear-fix {clear: both; line-height: 1px; }

@media screen and (min-width:601px) and (max-width:800px) {
	.promo_container { padding: 0 20px 15px 20px; }

	.promo_container .promo { background-position: 50% 4%; }

	.promo_container .promo .promo-content { padding: 170px 10px 0 45px; }

	body { background-image: none; }
}

/* ======================================== PROMO AREA MEDIA QUERIES ======================================== */

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

	.promo_container .promo .promo-content { padding: 0 30px 5px 125px; }
	#lw {font-size: .6em !important; width:100%; text-align:center !important;}
	.lw {font-size: .9em;}
	.promo_container .promo { background-position: 0% 50% !important; }
}
  
/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

	.promo_container .promo .promo-content { padding: 0 20px 65px 195px; }
	#lw {font-size: .6em !important; width:100%; text-align:center !important;}
	.lw {font-size: 1.5em !important;}
	.promo_container .promo { background-position: 0% 30% !important; }
}

@media screen and (min-width:50px) and (max-width:500px) {
	.promo_container { padding: 0; }
	
	.promo_container .promo {
		width: auto;
		float: none;
		padding: 10px 0;
		background-position: 20px 13px;
		border-top: 1px solid #ccc;
	}
	
	.promo.one, .promo.two, .promo.three {background-size: 45%; }
	.promo.one, .promo.two, .promo.three  {background-position: 0 .2em; }
}

/* ======================================== PROMO AREA END ======================================== */



/* ======================= LARGE SCREEN MENU BAR START =================================== */

.menubar {
	max-width: 85%;
	margin: 1em auto 2em;
	padding:.25em;
	background: -webkit-linear-gradient(left top, #7F70B2, #422E82);
	background: -moz-linear-gradient(#7F70B2, #422E82);
	background: linear-gradient(#7F70B2, #422E82);
	border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	-moz-box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
}

nav ul { list-style: none; }

nav ul li {
	display: inline-block;
	margin-right: .3em;
	border-radius: 6px;
	-webkit-box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	-moz-box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	box-shadow: 2px 2px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
}

nav a {
	font-family: "Enter Sansman", Magenta;
	color: #F0E6FF;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	font-size: .8em;
	padding: .3em .5em;
	border-radius: .3em;
	background-color: #2626FF;
	background: -webkit-linear-gradient(left top, #B1B1FF, #2626FF);
	background: -moz-linear-gradient(#B1B1FF, #2626FF);
	background: linear-gradient(#B1B1FF, #2626FF);
}

nav a:hover,
nav a:focus { color: #422E82; }

nav a:active {
	color: #FFE800;
	text-shadow: 0 .5px 4px #FFF; /*#FFF7A4*/
	background: -webkit-linear-gradient(left top, #2626FF, #B1B1FF);
	background: -moz-linear-gradient(#2626FF, #B1B1FF);
	background: linear-gradient(#2626FF, #B1B1FF);
}

.current {
	text-shadow: 0 0 4px #FFF;
	font-size: .85em;
	-webkit-box-shadow: 0px 0px 3px 3px #ccc, 2px 3px 3px rgba(0,0,153,1);
	-moz-box-shadow: 0px 0px 3px 3px #ccc, 2px 3px 3px rgba(0,0,153,1);
	box-shadow: 1px 1px 1px 3px #ccc, 2px 3px 3px rgba(0,0,153,1);
}

/* ======================== LARGE SCREEN MENU BAR END ==================================== */


/* ======================= SMALL SCREEN MENU BAR START =================================== */

.menubar-lower {
	max-width: 80%;
	margin: 1em auto 2em;
	padding:.25em;
	background: -webkit-linear-gradient(left top, #7F70B2, #422E82);
	background: -moz-linear-gradient(#7F70B2, #422E82);
	background: linear-gradient(#7F70B2, #422E82);
	border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	-moz-box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
}

.menubar-lower nav a {
	display: block;
	margin: 1em auto;
	padding: .6em;
	width: 90%;
	border-radius: 6px;
	-webkit-box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	-moz-box-shadow: 1px 1px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
	box-shadow: 2px 2px 1px #ccc, 2px 3px 3px rgba(0,0,153,1);
}

/* ======================== SMALL SCREEN MENU BAR END ==================================== */

footer {
	padding: 1em 0;
}

#lw {
	margin: 2em 2em 0 0;
	padding-bottom: .3em;
	text-align:right;
	color: #464646;
	font-size: .7em;
	font-family:Arial, Helvetica, sans-serif;
}

.lw {font-family: magentaregular; letter-spacing: 4px;}

.footernav {
	width:100%;
	text-align:center;
}

.footernav a {
	color: #F0E6FF;
	outline:0;
    font-size: .7em;
    font-family: magenta;
	text-decoration:none;
	-webkit-transition: color .25s ease-out;
	-moz-transition: color .25s ease-out;
	-o-transition: color .25s ease-out;
	transition: color .25s ease-out;
}

.footernav a:hover {
	color: #422E82;
    font-family: magenta;
	-webkit-transition: color .25s ease-out;
	-moz-transition: color .25s ease-out;
	-o-transition: color .25s ease-out;
	transition: color .25s ease-out;
}

.footernav a:active { color: #FFE800; }

/* ===================================== Media Queries ===================================== */
@media screen and (min-width:500px)  {
	.footermenu {
		display: none;
	}
}
@media screen and (max-width:500px) and (min-width:50px) {
	.menubar {
		display: none;
	}
	.footernav a {
		display: block;
		width: 55%;
		margin: 1em auto;
		padding: .3em;
	}
	#lw {font-size: .6em !important; width:100%; text-align:center !important;}
	.lw {font-size: .9em;}
}