/* Global reset
*****************************************************************/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
                -webkit-font-smoothing:antialiased;
		-webkit-text-size-adjust:none;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body   { line-height: 1; }
	ol, ul { list-style: none;}


	html { overflow-y: scroll; } /* always force a scrollbar in non-IE */
	body { line-height:1.5; color: #fff;
		   overflow-x:hidden;}

	.open a, .open a:link,
	.open a:active,
	.open a:visited { outline:none; text-decoration:underline; cursor:pointer; color:#fff;}
	.open a:hover { color:#ccc;}

	a, a:link,
	a:active,
	a:visited { outline:none; cursor:pointer; color: #fff;}
	a:hover { color:#fff;}
	img 	{ display:block; border:none;}
	
	#firstsuccess a { text-decoration:underline;}

	.clear { clear:both}

	div {position:relative;}

	.blackfont { color: #fff; }
	
/* top header menu
*****************************************************************/

	#wrapper  	     { position:relative;}
	#branding 	 	 { width:100%; position:fixed; z-index:100; background-color:#000; top:0;}
	#branding .inner { width:900px; margin:0 auto; text-transform:uppercase; line-height:normal;}
	.hd-col1 		 { width:10%; height:50px; float:left;}
	.hd-col1 .pos    { position:absolute; bottom:10px;}


	.media-col 		 { width:90%; float:left; text-align:right; padding-top:10px; color:#fff;}
	.media-col a i 	 		 { font-size:24px; padding: 0 5px; color:#fff; transition:all 0.3s ease; }
	.media-col a:hover i 	 {  color:#fbcb5d; transition:all 0.3s ease; }

	.media-col a 		{ color:#fff; transition:all 0.3s ease;}
	.media-col a:hover  { color:#fbcb5d; transition:all 0.3s ease; }


   /* • Animated Hamburger Icon Menu
	------------------------------------------------------------------------- */
	#nav-toggle { position: absolute; left: 50%; bottom:0;}
	#nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; }
	#nav-toggle span,
	#nav-toggle span:before,
	#nav-toggle span:after { cursor:pointer; border-radius:5px; height:5px; width:35px; background:#61C7CD; position:absolute; display:block; content: '';}
	#nav-toggle span:before { top: -10px; background:#7667AE;}
	#nav-toggle span:after  { bottom: -10px; background:#e95472;}

	#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 300ms ease-in-out;}
	#nav-toggle.active span { background-color: transparent;}
	#nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; }
	#nav-toggle.active span:before { transform: rotate(45deg);}
	#nav-toggle.active span:after  { transform: rotate(-45deg);}


   /* • Menu
	------------------------------------------------------------------------- */
	.menu-blk { position:absolute; width:350px; z-index:900; top:50px; background-color:#f2f2f2;  
				-webkit-box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.25);
				   -moz-box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.25);
						box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.25);}
	
	.menu-blk div  { border-bottom:1px solid #dbdbdb; padding:5%}
	.menu-blk a div { transition:all 0.3s ease; color:#333;}
	.menu-blk a:hover div { background-color:#333; color:#fff; transition:all 0.3s ease; 
							-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.22);
							   -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.22);
									box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.22);}


   /* • Form
	------------------------------------------------------------------------- */

	a .login { padding:1% 3%; font-size:30px; border:2px solid #fff; text-transform:uppercase; color:#fff;
			   transition:all 0.3s ease; margin: 0 auto}
	a:hover .login {
		 -webkit-transform: scale(0.95);
             -ms-transform: scale(0.95);
                 transform: scale(0.95);}

	input.blk-input { background-color:#333; border:none; outline:none; padding:10px 15px; margin-bottom:10px; color:#fff;
					  width:600px; height:30px;
					  font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; font-size:14px;}
	input:focus.blk-input {background-color:#000; transition:all 0.3s ease;}

        input.blk-input.error {
            color:#c00000; margin-left: 0;
            font-family: Verdana, Arial, Helvetica, sans-serif; font-style:italic;
            font-size:12px;
        }

	.close    { float:right; margin-right:90px; margin-top:20px}
	.close i  { font-size:30px; cursor:pointer; transition:all 0.3s ease;}
	.close i:hover { color:#fbcb5d;
	     -webkit-transform: scale(0.9);
             -ms-transform: scale(0.9);
                 transform: scale(0.9);}


    .login  { width:200px;}
    .submit { width:580px;}
    .error  { text-align:left; color:#c00000; margin-left: 100px; margin-bottom: 20px;
    		  font-family: Verdana, Arial, Helvetica, sans-serif; font-style:italic;}

    .login-blk { margin:0 auto; width:800px; text-align:center;}


    /* step 1-3 */
	.step-blk { text-align:center; width:100%; margin-top:5%; /*display:table;*/ table-layout:fixed; height:100%; color:#fff;}
	.step-col { width:22%; /*display:table-cell;*/ float:left; height:480px; padding:0 5%;}
	.step-col.border { box-shadow:inset 1px 0 0 #292929} 
	.step-col img { padding-bottom:5%; margin:0 auto}

	.step-col .img-col 	   { width:100%;}
	.step-col .img-caption { width:95%;}


/* ==========================================================================
	ipad
============================================================================= */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
	.step-blk { color:#fff;}
}

/* ==========================================================================
	Mobile
============================================================================= */

@media only screen and (max-device-width: 480px) {

	.menu-blk { top:80px;}
	.hd-col1 		 { height:80px;}
	.hd-col1 .pos    { bottom:25px; border:1px solid green;}
	nav#primary		 { display:none}
	.media-col 		 { padding-top:20px;}
	.media-col a i 	 { font-size:40px; padding: 0 10px;}

    .login-blk { margin:0 auto; width:800px; text-align:center;}
	input.blk-input { height:40px; font-size:28px;}
	input:focus.blk-input {background-color:#000; transition:all 0.3s ease;}
    .login  { width:200px;}
    .submit { width:580px;}


	.step-blk { color:#fff;}
	.step-col { width:75%; float:left; height:auto; padding:2% 5%; margin-left:5%; border-bottom:1px solid #666}
	.step-col img {width:100px;}

	.step-col .img-col 	   { width:15%; float:left; padding-right:10%;}
	.step-col .img-caption { width:75%; float:left; text-align:left; margin-top:2%}


}