/* ***********************************************
					Mobile Styles
*********************************************** */



@-ms-viewport {
   width: device-width; 
}
@-o-viewport { 
   width: device-width; 
}
@viewport {
   width: device-width; 
}

@media (max-width: 800px), only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) , only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and ( -webkit-min-device-pixel-ratio: 2) {
	
	/* General */ 
	@viewport { max-width: 100%; } 
	
	body {
		background: #ddd!important;
		padding-top: 0!important;
		padding-bottom: 0px;
		font-size: 16px;
	}
	
	.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
		width: 100%;
	}
	#header{
		width: 100%;
		background-color: #ffffff;
		background-repeat: no-repeat!important;
		background-position: center center;
		background-size: contain;
		position: static;
		height: calc(30vw );
	}
	
	
	.navbar-fixed-top .navbar-inner {
		padding-left: 0px;
	}
	
	.navbar {
		position: static!important;
	}
	
	
	.navbar-fixed-top .container {
		width: 100%;
	}
	
	.row-fluid .span7 {
		width: 100%;
		margin-left: 0;
		
	}
	.row-fluid .span5 {
		width: 100%;
	}

	.hero-unit {
		max-width: 100%!important;
		box-shadow: 0 0 0;
		padding: 0;
		border-radius: 0;
		margin-bottom: 0;
	}
	
	ul.footerTopUl {
    margin: 0!important;
	background: #000000!important;
	}	
	
	footer .footerTopLi {
		display: block;
		font-size: 1em!important;
		line-height: 2.5em!important; 
		border-right: 0 none!important;
		border-bottom: 1px solid #ffffff!important;
		padding: 1%!important;
	}
	
	footer {
		background-color: transparent!important;
	}
	
	.footerTopUl a {
		color: #ffffff!important;
		text-transform: uppercase;
		font-weight:bold;
	}
	.footerTopLi ul {
		bottom: 10%!important;
	}
	.footerTopLi ul > li > a {
		color: #000000!important;
	}
	.footerTopLi  a:hover{
		text-decoration: none!important;
	}
	/* Login Tab */
	
	div#ay-login-text, .dynamicText {
		padding: 3%;
	}
	
	.dynamicText {
		font-size: 14px!important;
	}
	
	div.tab-content {
		min-height: 350px;
		border-radius: 0;
		padding-bottom: 10%;
		overflow-y :hidden!important;
	}
	
	#ay-login-box {
		width: 80%;		
	}
	
	#ay-login-box input {
		height: 30px;
		font-size: 16px;		
	}
	
	div#ay-login-box label {
		margin-bottom: 0;
}
	
	input#ay-loginSubmit {
		float: none;
		width: 75%;
		margin-top: 15px;
		margin-left: 15%;
		background: #000000;
	}	
	
	form#frmApplicantLogin {
    margin-bottom: 0;
	}
	
	/* Account Creation Tab */
	
	#tab2 h2, #indicatesRequired {
		text-align: center;
		margin-bottom: 7px;
		padding-right: 0;
	}
	
	.create-tab, #rec-login-box {
		width: 90%;
		margin: 0 auto;
		padding-top: 15px;
	}
	
	div#ay-create-box {
		width: 90%;
		margin: 0 auto;
	}
	.span7{
		width: 95%
	}
	.ay-create-label label {
		text-align: left;
		float: none;
		margin-bottom: 0;
	}

	.ay-create-label input {
		text-align: left;
		width: 99%!important;
		height: 30px;
		font-size: 16px;
	}

	div.ay-create-label {
		max-width: 99%;
		margin-top: 5px;
	}
	
	#parentEmail, #parentConfirmEmail, #parentPassword {
		margin-bottom: 0;
	}
	
	span.italic.help-inline {
		display: block;
		margin-top: 1px;
	}
	
	p#ZipCaption {
		margin-left: 0;
		margin-top: 1px;
		white-space: normal;
	}
	
	#ZipCaption.help-block {
		display: inline-block;
	}
	
	
	.newFormsLeft.help-inline {
    	margin-left: 0!important;
	}

	
	input#ay-createSubmit {
		width: 75%;
		margin-left: 15%;
		margin-top: 15px;
		font-size: 16px;
		text-align : center!important
	}
	
	
	/* Error Messages */
	
	.newFormsLeft div[generated=true].error, .newFormsLeft div[generated=true].validationError, .newFormsLeft label div.error, #ay-login-box div.validationError {
		margin-top: 45px;
		margin-left: 0px;
		margin-bottom: 0px;
	}
	
	.newFormsLeft input.error, .newFormsLeft input.validationError {
		margin-bottom: 30px;
	}

	/* Duplicate account page */
	input#ay-LoginRet,input#ay-ForgotLogin,input#ay-Continue {
		width: 80%;
		margin-left: 10%;
		margin-top: 10px;
		font-size: 14px;
	}

	/* Terms of Use Page */
	
	.row-fluid  .span9 {
		width: 100%;
		padding: 5%;
	}
	
	.span9 p {
    font-size: 14px;
	}
	
	
	input[type="checkbox"], input[type="radio"] {
		width: 20px;
		font-size:0px !important;
	}
	
	legend {
		font-size: 19.5px;
	}
	
	input#ay-externalSubmit {
		width: 75%;
		margin-left: 15%;
		margin-top: 15px;
		font-size: 16px;
	}
	
	
	/* Overview Page */
	div#ay-dashboard-text {
    margin: 0 auto;
	}

	.row-fluid .span4, .row-fluid .span8 {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		
	}

	div#eventsBox {
		border:  0 none;
		box-shadow: 0 0 0;
		margin: 0;
	}

	.appListButtonDisable{
		cursor: not-allowed;
        pointer-events: none;
		opacity: 0.45!important;
		color: #c0c0c0!important;
		float:none !important;
	}
	.appListSubHeader {
		border-radius: 0;
		padding: 3%;
		background: #b5b5b5;
		text-align:center !important;
	}
	
	.accordion, .subAppList {
		margin-bottom: 0;
	}
	
	h2#appListHeader, #appList h3, #appList li.status h4 , #appList h4, #appList li li{
		text-align:center;
		float: none;
	}
	#appList a {
			margin : 0!important;
	}
	.subAppList h4, .subAppList ul , .subAppList li, .subAppList li>ul>li{
		text-align : left !important;
		margin-left : 0px!important;
		font-size :12px ! important;
	}
	.subAppList li, .subAppList ul{
			margin-bottom : 15px!important;
	}
	.subAppList ul>li{
			margin-bottom : 0px!important;
	}
	#appSubmited ul{
		margin-bottom : 15px!important;
	}
	.appSubmited li{
		color :#333333!important;
	}
	a.btn.btn-primary.appListButton {
		width: 75%;
		margin-left: 10%;
	}
	.divInstruct {
		width: 220px; 
		margin: 0 auto;
		text-align:center!important;
	}
	
	#StartApp{
		 width: 220px; 
		margin: 0 auto;
		text-align:center!important; 
	}
	li.status.appSubmited {
		text-align: center;
		float: none;
		padding: 0;
		margin: 0;
	}

	li.status.appSubmited ul {
		margin: 0;
	}
	#Reclist{
		 width: 270px; 
		 margin: 0 auto;
		 text-align:center!important; 
	}
	#Recadd{
		 width: 220px; 
		 margin: 0 auto;
		 text-align:center!important; 
	}
	form {
		margin: 0;
	}
	
	#mobile-info-box {
		display: block;
	}
	div.information {
		margin-left: 5%;
		margin-right: 5%;
	}
	p.information {
		margin-left: 0px;
		margin-right: 0px;
	}
	#PMobInfo
	{
		font-family: Arial, Helvetica, sans-serif !important;
		font-size :13px ! important;
		font-weight:normal ! important;
	}
	.span12
	{
		font-family: Arial, Helvetica, sans-serif !important;
		font-size :13px ! important;
	}
	#divLoginErrors, #divCreateErrors
	{
		padding-bottom: 0px;
		padding-top: 0px;
		
	}
	/* User Control */	



	.navbar .btn-group {
		padding: 0;
	}
	
	a.btn.btn-small.btn-inverse {
    background: black;
}


	/* Modal */
	
	.modal {
    width: 100%!important;
    top: 5%;
    max-height: 100%;
    left: 0;
    margin: 0 auto!important;	
	overflow-y :hidden!important;
	}
	.modal-body{
		max-height: calc(100vh - 200px)!important;
		overflow-y :auto!important;
	}
	
	#modalbody form table {
		width: 100%!important;
		font-size: 14px;
		
	}
	
	.FormText {
		width: 100%;
	}
	
	td.FormText {
    text-align: left;
	}
	
	/* Logout Screen */
	
	p#ay-loginText {
    width: 95%;
    text-align: center;
	}
	
	#dynamicText p {
		font-size: 1em;
	}
	
	#divLoginCont {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		/* optional */
		-webkit-box-align: start;
		-moz-box-align: start;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
	  }

	  #divLoginCont, #divLoginDT {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
	  }

	  #divLoginCont ,#divLoginMain {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	  }
		
	
	#UserLoginLink2 , #CreateAccountLink2, #forgotConnectPIN , #forgotPIN
	{
		display: block!important;
		text-align: center;
	}

	#UserLoginLink, #CreateAccountLink {display: none;}
	h1.appTitle{
		width: 96% !important;
	}
	.appTitleMob{
		display:none!important;
	}
	/* Decision Letter */
	#decision-letter{
		overflow:hidden;
		height:auto; 
		width: 96% !important;
		word-wrap: break-word!important;
	}
	
	#decision-letter table {
		table-layout:fixed !important;
		width: 96% !important;
	}
	#decision-letter td{
		width :auto!important;
	}
	#decision-letter div{
		width: 100% !important;
	}
	/* Reset Password page  */
	
	div#Resetpassword {
		width: 100%;
		background: none;	
	}
	div#Resetpassword h2 {
		text-align: center;
		margin-bottom: 2px;
		padding-top: 10px;
		
	}
	div#Resetpassword .instructionText {		
		
		padding-bottom: 5px;   
			
	}
	#ay-reset-box {		
		margin: 0 auto;	
		width: 80%!important;			
	}
	
	#ay-reset-box input {
		height: 30px;	
		width: 100%!important;	
	}
	
	div#ay-reset-box label {
		width: 100%!important;	
		}
	div#Resetpassword input#ay-externalSubmit{
		float: none;
		width: 75%!important;;
		margin-top: 0px;
		margin-left: 10%;
		background: #000000;
	}	
	#ay-expreset-box {	
		margin: 0 auto;	
		width: 80%!important;
		min-height: 100px;
	}		
	#ay-expreset-box  div{	
		
		font-size: 16px!important;
		padding-bottom: 30px;	
		padding-left: 0px;
	}		
	div#ay-expreset-box h2 {		
		margin-bottom: 1px;
		padding-top: 40px;
		
	}
	/*
	Checking for hamburger
	*/
	.hideControl
	{
	 display: none!important;		
	}
	#btn-header{
	width:100%; 
	background:#000000; 
	height:40px; 
	line-height:40px;
	text-align:center;
	display: block!important;
	}
	.hamburger{
	background: none;	
	line-height: 40px;
	color: #fff;
	border: 0;
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	z-index: 10000000000000;
	}	
	
	#btncontrol {
		z-index: 1000000;
		font-weight: bold;
		font-size: 0.8em;
		width: 100%;
		background: #131313;
		position: absolute;
		text-align: center;
	}
	
	#btncontrol ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		list-style-image: none;
	}

	#btncontrol li {
		display: block;
		padding-top: 6px;
        padding-bottom: 6px;
		font-size: 1.1em;
		font-weight: bold;	
	}

	#btncontrol li:hover {
		display: block;	
	}

	#btncontrol ul li a {
		text-decoration: none;
		margin: 0px;
		color: #fff;
		display: block;
	}

	#btncontrol ul li a:hover {
		color: #fff;
		text-decoration: none;
		display: block;
	}

	#btncontrol a {
		text-decoration: none;
		color: white;
		display: block;
		width: 100%;
		height: 30px;
		border-top: #5f5757 2px solid;
		border-bottom:0px;
		border-right:0px;
		border-left:0px;
		
	}

	#btncontrol a:hover {
		text-decoration: none;
		color: white;
	}
	#btncontrol i {
		display: none!important;	
	}
	a#Techsupport {
		display: none!important;	
	}
	a#Profile {
    border-right: 1px solid white;
	}
	#divLogoutWarning {
		width : 92%!important;
	}	
	#overlay{
    background: #333333;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
	}
	/* Enrollment Form */
	#tableInfo{
		table-layout:fixed !important;
		width: 98% !important;
		border-collapse :collapse;

	}
	#tableInfo  table{
		table-layout:fixed !important;
		width: 100% !important;
	}
	
	#tableInfo input,select,textarea,fieldset{
		width: 95% !important;
	}
	#tableInfo label input {
		position:absolute;
		top: -9999px;
		left: -9999px;
		visibility: hidden!important;
	}
	#tableInfo fieldset  input{
		width: auto!important;
	}
	#tableInfo fieldset  label{
		margin:0px!important;
		white-space: normal!important;
		word-break: break-all!important;
	}
	
	.mobEnrolldiv h2,.mobEnrolldiv h3,.mobEnrolldiv p{
		margin-top : 10px !important;
		margin-bottom : 10px !important;
		margin-left : 20px !important;
		margin-right : 20px !important;
	}
	.mobEnrolldiv fieldset{
		width: 95% !important;
	}
	.mobEnrolldiv  input{
		width: auto!important;
	}
	.mobEnrolldiv label {
		width: 30%!important;
	}
	/*** These css class should be only used in mobile . Do not overwrite these class in desktop*****/
	.hideEnrollRow{
		display:none!important;
	}
	
	.btnActionSmall > img{
		display:none!important;
	}
	.btnActionLarge,.btnActionMedium,.btnActionSmall{
		background:#0074cc!important;
		text-align : center!important;
		vertical-align : middle!important;
		margin-top : 10px!important;
		margin-bottom : 10px!important;
		font-size : 12px!important;
	}
	.btnActionLarge a,.btnActionMedium a,.btnActionSmall a{
		padding :0!important;
	}
	.btnActionLarge{
		width : 75%!important;
	}
	.btnActionMedium{
		width : 60%!important;
	}
	.btnActionSmall{
		width : 50%!important;
	}
	
	.mobEnrollBtnRow{
		background-color:#CCCCCC!important;
		text-align: center!important;
		margin :0!important;
		padding :0!important;
	}
	
	.mobEnrollBtnLink{
		max-width : 100px!important
	}
	
	#divEnrollFinalPrint {
		display :none!important;
	}
	/*** End - These css class should be only used in mobile *****/
	
	/* End Enrollment Form */
	
	/* Application Form */
	
	#MainContent table {
		table-layout:fixed !important;
		width: 96% !important;
	}
	#MainContent  table{
		table-layout:fixed !important;
		width: 100% !important;
	}
	
	#MainContent input[type="text"],select,textarea,fieldset{
		width: 95% !important;
	}
	#MainContent label input {
		position:absolute;
		top: -9999px;
		left: -9999px;
		visibility: hidden!important;
	}
	#MainContent fieldset  input{
		width: auto!important;
	}
	#MainContent fieldset  label{
		margin:0px!important;
		white-space: normal!important;
		word-break: break-all!important;
	}
	
	.MenuBkgrd{
		height: auto!important;
		width: 100%!important;
	}
	
	.MenuBkgrd table{
		table-layout:fixed !important;
		width: 100% !important;
	}
	
	.subMenu{
		text-align : left!important;
		width:100%!important;
		padding-right: 0px!important;
		padding-left: 0px!important;
	
	}
	
	.span9{
		float:right!important
	}
	.parentAppSubmit{
		text-align :center!important;
	}
	.ay-Submit{
		max-width:200px!important;
		width: 60%!important;
		padding : 5px 30px!important;
	}
	#header{
		height:50px!important;
		align:center!important;
	}
	/* End Application Form  */
	
	.MobileHideMenu {
		display:none;
	}
	#divMainMenu{
		display:none;
		position:absolute!important;
	}
	.MobContentDiv{
		width :98%!important;
		float :left!important;
		padding-left:10px!important;
		margin-left:0px!important;
		z-index: 10000;
	}
	.divBlueButton{
		width:100%;
		text-align:center;
	}
	
	#divMainMenu{
		width :75%!important;
	}
	.subMenu a{
		width :85%!important;
	}
	.divMenuIcon {
    width: 25px;
    height: 2px;
    background-color: black;
    margin: 6px 0;
	}
	.menucontainer {
		display: inline-block!important;
		cursor: pointer;
	}
	.MenuTitle{
		display: table-cell!important;
		vertical-align: middle!important;
		width : 90px;
		height :30px;
		text-align:right;
		font-weight:bold;
		font-size:14px;
	}
	
	.bar1, .bar2, .bar3 {
		width: 25px;
		height: 2px;
		background-color: #333;
		margin: 6px 0;
		transition: 0.4s;
	}

	.change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-4px, 3px) ;
		transform: rotate(-45deg) translate(-4px, 3px) ;
	}

	.change .bar2 {opacity: 0;}

	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
		transform: rotate(45deg) translate(-8px, -8px) ;
	}
	.Recdel,.RecResend{
		float: right!important;		
	}
	.RecHeader{
		padding-bottom:0px!important;
		padding-left:5px!important;
		padding-right:8px!important;
		padding-top:8px!important;
		
	}
	.RecHeader h3 {
		float: left!important;		
	}
	.RecEditHead 
	{
		width:100%!important;	
		display:block!important;
		float:none!important;
		margin-left:3%!important;
		margin-right:3%!important;	
	}
	.Recinfo
	{
		padding-bottom:0px!important;
		padding-left:0px!important;
		padding-right:0px!important;
		padding-top:0px!important;
		margin-left:3%!important;
		margin-right:3%!important;			
	}
	.MobRecEdit 
	{
		width:100%;
		text-align:center!important;
		display:block!important;
		float:none!important;
		background-color: #CCCCCC!important;
	}
	.MobRecEdit input 
	{
		padding-left:10px!important;
		padding-right:10px!important;
		margin-top:10px!important;
		margin-bottom:10px!important;
		max-width:320px!important
	}
	#ay-recForm {		
		margin-left:3%!important;
		margin-right:3%!important;
	}
	#ay-rec-box  table{
		table-layout:fixed !important;
		width: 100% !important;		
	}
	#Rectable select, #Rectable [type="text"], #Rectable textarea{
		width:100%!important;	
		
	}	
	#ay-rec-box fieldset{
		width:100%!important;
		
	}
	#Rectable label{
		margin:0px!important;
		white-space: normal!important;
		word-break: break-all!important;
	}
	#ay-rec-box .information{
		margin-left:0px!important;
		margin-right:0px!important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size :13px ! important;
		font-weight:normal ! important;
	}
	#Rectable td {
		width:50%;
	}	
	#Rectable  [colspan="2"]{
		width:100%!important;
	}
	[type="radio"]
	{
		padding:0!important;
		vertical-align: bottom!important;	
	}
	[type="radio"]~label
	{
		width:20%!important;
	}
	#FB_IFrame{
		padding-left:calc(45vw)!important;
	}
	.fb_iframe_widget {
	width:100%!important;
	}
	.fb_iframe_widget iframe{
	width:100%!important;
	}
	.fb_iframe_widget span{
	width:100%!important;
	vertical-align: middle!important;
	}
	.dataConsent {
		width : 90%!important;
	}
}


@media (max-width: 500px){
	#header {
		background-size: 90%;		
		background-position: center center!important;
		margin: 0;				
		background-size: contain;
		position: static;
		height: calc(30vw );
	}
}