@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
	
	body:before {
	    content: url(../img/process/BG_White_Pattern.jpg)
	    url(../img/UI_Loading_Logo.png)
	    url(../img/errors/UI_Error_Rotate.png)
	    url(../img/errors/UI_Error_Resolution.jpg)
	    url(../img/UI_Loading.gif)
	    url(../img/menu/UI_MenuOption_1@2x.png)
	    url(../img/menu/UI_MenuOption_2@2x.png)
	    url(../img/menu/UI_MenuOption_3.png);
	   	display:none;
	}

	
	html, body {
		height: 100%;
		font-family: 'Open Sans', sans-serif;
		overflow: hidden;
	}
	
	.form-control::-moz-placeholder {
	    text-transform: uppercase;
	}
	
	.form-control::-webkit-input-placeholder {
		text-transform: uppercase;
	}
	
	.vertical-align {
	  position: relative;
	  top: 50%;
	  -webkit-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
	  transform: translateY(-50%);
	}
	
	.img-center {
		margin: 0 auto;
		position: relative;
	}
	
	.border-box { 
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.content-box {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	
	.margin-top {
		margin-top: 40px;
	}
	
	@media (max-width: 1024px) {
		.margin-top {
			margin-top: 30px;
		}
	}
	

	/*
	.container-fluid {
		background-color: #fff;
		height: 100%
	}
	.container-fluid > div {
		height: 100%
	}

	.home-header, .home-section {
		height: 50%
	}
	*/



	/* border */
	body {
		background-color: #fff;	
	}

	/* modal */
	.st-blurred-region {
	    -webkit-filter: blur(22px);
	    -moz-filter: blur(22px);
	    -o-filter: blur(22px);
	    -ms-filter: blur(22px);
	    filter: blur(22px);
	}
	.st-blurred-region-overlay {
		position:fixed;
		overflow-y: auto;
		overflow: hidden;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:#000;
		z-index:10000;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
	}
	.st-blurred-region-close {
		border:0px;
		background-color:rgba(0,0,0,0);
		font-size:50px;
		color:red;
	}
	.st-blurred-region-close:hover {
		color:red;
	}
	.st-blurred-region-close:focus {
		outline: 0;
	}
	.st-blurred-region-overlay div {
		overflow: hidden;
	}
	
	/* header nav */
	.main-header {
	    background-color: #000;
	}
	.main-header > img {
		width: 100%;
	}
  	.main-header .nav > li {
  		background-color: #000;
  		border-right: 2px solid #292B2C;
  	    display: inline-block;
  	    float: left;
  	    width: 16.6667%;
  	}
  	.main-header .nav > li:last-child {
  		border-right: none;
  	}
  	.main-header .nav > li > a {
  	    padding: 0;
  	    background-color: #000;
  	    color: rgba(0, 0, 0, 0);
  	    cursor: default;
  	    opacity: 0.5;
  	}
  	.main-header .nav > li.active > a {
  		opacity: 1;
  		cursor: pointer;
  	}
  	.main-header .nav > li.on {
  		background-color: #fff;
  	}
  	.main-header .nav > li.on > a {
  		opacity: 0.5;
  	}
  	.main-header .nav > li > a > img {
  	    max-width: 100%;
  	}
	/* footer nav */
  	.navbar {
  	    background-color: #eee;
  	    border: none;
  	    border-radius: 0;
  	    min-height: 0;
  	    margin-bottom: 0;
  	}
  	.navbar .nav-menu {
  		background-color: #1e1e21;
  	    float: left;
  	    position: relative;
  	    z-index: 1;
  	}
  	.navbar .nav-logo {
  	    position: absolute;
  	    width: 100%;
  	}
  	.navbar .nav-login,
  	.navbar .nav-logout {
  		background-color: #d1d1d1;
  	    float: right;
  	    position: relative;
  	    z-index: 1;
  	}
  	.navbar .nav-settings {
  		background-color: #1e1e21;
  	    float: right;
  	    position: relative;
  	    z-index: 1;
  	}
  	
  	
  	
	/* slider */
  	.slider {
  		height: 100%;
  		position: relative;
  	}
  	.slider .slide {
  	    height: 100%;
  	    width: 100%;
  	    position: absolute;
  	    background-position: center center;
  	    background-repeat: no-repeat;
  	    background-size: cover;
  	    background-color: #000;
  	}
  	.slider .fadein,
  	.slider .fadeout {
  	-webkit-transition: all linear 0.5s;
  	-moz-transition: all linear 0.5s;
  	-o-transition: all linear 0.5s;
  	transition: all linear 0.5s;
  	}
  	.slider .fadein.ng-hide-remove,
  	.slider .fadeout.ng-hide-add.ng-hide-add-active {
  	  opacity: 0;
  	  display: block !important;
  	}
  	.slider .fadeout.ng-hide-add,
  	.slider .fadein.ng-hide-remove.ng-hide-remove-active {
  	  opacity: 1;
  	  display: block !important;
  	}
  	
  	
  	


	.section {
		background-color: #fff;
	}
  	.section .container {
  		max-height: 100%;
  		padding: 20px 0;

  	}
  	.section a.button {
  		opacity: 0.5;
  		cursor: default;
  	}
  	.section a.button.active {
  		opacity: 1;
  		cursor: pointer;
  	}
  	
  	
  	/* home */
  	.home-header .slider .img-logo {
  	    padding: 40px; 
  	}
  	.home-header .slider .img-start {
  	    padding: 0 20px 20px;    
  	}
  	.home-header .slider .img-start.no-signup {
  	    padding: 0 20px 164px;
  	}
  	.home-header .slider .img-signup {
  	    padding: 0 20px 46px;  
  	}
  	@media (max-width: 1024px) {
  		.home-header .slider .img-logo {
  		    padding: 20px;
  		}
  		.home-header .slider .img-start {
  		    padding: 0 10px 10px;
  		}
  		.home-header .slider .img-start.no-signup {
  		    padding: 0 10px 82px;
  		}
  		.home-header .slider .img-signup {
  		    padding: 0 10px 23px;  
  		}
  	}
  	.home-section {
  		background-position: center center;
  		background-repeat: no-repeat;
  		background-size: cover;
  		background-color: #000;
  		background-image: url("../img/home/BG_Black_Pattern.jpg");
  		height: 100%;
  	}
  	.home-section .container {
  	    width: 85%;
  	    max-width: 1170px;
  	}
  	.home-section .carousel {
  	    margin-top: 80px;
  	}
  	.home-section .carousel li {
  	    margin-right: 20px;
  	}
  	.home-section .flexslider {
  	    background: none repeat scroll 0 0 transparent;
  	    border: medium none;
  	    border-radius: 4px;
  	    box-shadow: none;
  	    margin-bottom: 0;
  	    min-height: 298px;
  	}
  	@media (max-width: 1024px) {
  		.home-section .carousel {
  		    margin-top: 40px;
  		}
  		.home-section .flexslider {
  		    margin-bottom: 50px;
  		    min-height: 149px;
  		}
  	
  	}
  	.home-section .flex-control-nav {
  		display: none;
  	}
  	.flex-direction-nav a:before,
  	.flex-direction-nav a.flex-next:before {
  		content: "";
  	}
  	.home-section .flex-direction-nav a {
  		background-position: center center;
  		background-repeat: no-repeat;
  		height: 88px;
  		margin-top: -100px;
  		width: 88px;
  		cursor: pointer;
  		opacity: 1 !important;
  		color: rgba(0, 0, 0, 0);
  		text-shadow: none;
  	}
	.home-section .flex-direction-nav .flex-prev {
	    left: -100px !important;
	    background-image: url("../img/home/UI_Arrow_Left@2x.png");
	}
	.home-section .flex-direction-nav .flex-next {
	    right: -100px !important;
	    background-image: url("../img/home/UI_Arrow_Right@2x.png");
	}
	
	@media (max-width: 1024px) {
		.home-section .flex-direction-nav a {
			height: 44px;
			margin-top: -30px;
			width: 22px;
		}
		.home-section .flex-direction-nav .flex-prev {
		    left: -50px !important;
		    background-image: url("../img/home/UI_Arrow_Left.png");
		}
		.home-section .flex-direction-nav .flex-next {
		    right: -50px !important;
		    background-image: url("../img/home/UI_Arrow_Right.png");
		}
	}
	
	
	
	
	/* name */
	.name-header .slider .img-title {
	    padding: 60px 60px 40px;
	}
	@media (max-width: 1024px) {
		.name-header .slider .img-title {
		    padding: 30px 30px 20px;
		}
	}
	.name-section .form-inline {
		position: relative;
		/*
		margin-top: 240px;
		margin-bottom: 260px;
		*/
	}
	@media (max-width: 1024px) {
		.name-section .form-inline {
			/*
			margin-top: 120px;
			margin-bottom: 130px;
			*/
		}
	}
	.name-section .form-inline img {
		display: inline;
	}
	.name-section .form-group {
		margin-right: 80px;
		margin-bottom: 0;
	    display: inline-block;
	    vertical-align: bottom;
	    width: 60%;
	}
	.name-section .form-control {
		border: none;
		border-bottom: 1px solid #000;
		border-radius: 0;
		box-shadow: none;
		font-size: 44px;
		color: #000;
		height: 90px;
		width: 100%;
	}
	@media (max-width: 1024px) {
	  .name-section .form-group {
	  	width: 40%;
	  }
	  .name-section .form-control {
	  	font-size: 32px;
	  	height: 60px;
	  }
	}
	.name-section .form-control:focus {
		border-color: #000;
		box-shadow: none;
	}
	
	
	

	
	
	
	/* tile selection */
	.section .tile {
		display: inline-block;
		border: 3px solid transparent;
	}
	.section .tile.selected {
		border-color: #000;
	}
	
	
	
	
	/* finish */
	.finish-header .slider .img-title {
	    padding: 80px 60px;
	}
	@media (max-width: 1024px) {
		.finish-header .slider .img-title {
		    padding: 40px 30px;
		}
	}
	.finish-section .container {
	}
	.finish-section .tile.or {
	    padding: 0 40px 30px;
	}
	.finish-section .margin-top {
	}
	@media (max-width: 1024px) {
		.finish-section .container {
			padding-top: 40px;
			padding-bottom: 40px;
		}
		.finish-section .tile.or {
		    padding: 0 20px 30px;
		}
		.finish-section .margin-top {
		}
	}
	
	/* style */
	.style-header .slider .img-title {
	    padding: 80px;
	}
	.style-section .container {
		width: 100%;
	}
	.style-section .margin-top {
	}
	@media (max-width: 1024px) {
		.style-header .slider .img-title {
		    padding: 40px;
		}
		.style-section .container {

		}
		.style-section .margin-top {
		}
	}
	
	
	/* pattern */
	.pattern-header .slider .img-title {
	    padding: 100px;
	}
	.pattern-section .container {
	}
	.pattern-section .margin-top {
	}
	@media (max-width: 1024px) {
		.pattern-header .slider .img-title {
		    padding: 50px;
		}
		.pattern-section .container {

		}
		.pattern-section .margin-top {
		}
	}









	/* menu */
	.menu-close {
		position: absolute;
		top: 0;
		right: 0;
	}
	.menu-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	.menu-header .slider .slide {
		width: 33.334%;
	}
	.menu-header .slider .slide.left {
		left: 0;
	}
	.menu-header .slider .slide.center {
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.menu-header .slider .slide.right {
		right: 0;
	}
	.menu-header .slider .header-height {
		visibility: hidden;
		opacity: 0;
		z-index: -1;
	}
	.menu-header .slider .img-logo {
		padding: 130px 0 130px 20px;
	}
	@media (max-width: 1024px) {
		.menu-header .slider .img-logo {
			padding: 65px 0 65px 10px;
		}
	}
	.menu-section {
		border-top: 15px solid #000;
		background-color: #fff;
	}
	.menu-section .logo-right {
		float: right;
		margin: 40px;
	}
	.menu-section .menu {
		margin: 70px 30px 0;
	}
	.menu-section .nav {
	    margin-bottom: 80px;
	    margin-top: 20px;
	}
	.menu-section .nav > li {
	    padding: 0;
	}
	.menu-section .nav > li > a {
		padding: 0 30px 30px;
	}
	.menu-section .nav > li > a > img {
	    max-width: 100%;
	}
	.menu-section .nav > li > a:hover,
	.menu-section .nav > li > a:focus {
	    background-color: #fff;
	}
	.menu-close-bottom {
		border-top: 1px solid #000;
		background-color: #fff;
		padding: 0;
		margin: 0;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	@media (max-width: 1024px) {
		.menu-section .logo-right {
			margin: 20px;
		}
		.menu-section .menu {
			margin: 35px 15px 0;
		}
		.menu-section .nav {
		    margin-bottom: 40px;
		    margin-top: 10px;
		}
		.menu-section .nav > li > a {
			padding: 0 15px 15px;
		}
	}
	

	
	/* rotate */
	.rotate-header .slider img {
	    padding: 20px 60px;
	}
	/* resolution */
	.resolution-header .slider img {
	    padding: 20px 60px;
	}
	
	
	/* about */
	.about-header .img-title {
		margin: 140px auto;
	}
	.about-header .img-content {
		margin: 120px auto;
	}
	.about-header .img-logo {
		margin: 120px auto;
	}
	.about-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	@media (max-width: 1024px) {
		.about-header .img-title {
			margin: 70px auto;
		}
		.about-header .img-content {
			margin: 60px auto;
		}
		.about-header .img-logo {
			margin: 60px auto;
		}
	}
	
	/* preload modal images */
	.color-header:before {
	    content: url(../img/rotation/UI_Colors.png)
	    url(../img/rotation/UI_Colors_Grout.png)
	    url(../img/rotation/UI_Rotated_Tiles.jpg)
	    url(../img/rotation/UI_Title_Colors.png)
	    url(../img/rotation/UI_Title_Grout.png)
	    url(../img/rotation/UI_Title_Rotation.png);
	   	display:none;
	}
	/* rotation - learn more */
	.rotation-header .img-content {
		margin: 20px auto;
	}
	.rotation-header .img-tiles {
		margin: 80px auto;
	}
	.rotation-header .img-logo {
		margin: 120px auto;
	}
	.rotation-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	@media (max-width: 1024px) {
		.rotation-header .img-content {
			margin: 10px auto;
		}
		.rotation-header .img-tiles {
			margin: 40px auto;
		}
		.rotation-header .img-logo {
			margin: 60px auto;
		}
	}
	/* color - learn more */
	.color-key-header .img-content {
		margin: 20px auto;
	}
	.color-key-header .img-tiles {
		margin: 80px auto;
	}
	.color-key-header .img-logo {
		margin: 120px auto;
	}
	.color-key-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	@media (max-width: 1024px) {
		.color-key-header .img-content {
			margin: 10px auto;
		}
		.color-key-header .img-tiles {
			margin: 40px auto;
		}
		.color-key-header .img-logo {
			margin: 60px auto;
		}
	}
	/* grout - learn more */
	.grout-key-header .img-content {
		margin: 20px auto;
	}
	.grout-key-header .img-tiles {
		margin: 80px auto;
	}
	.grout-key-header .img-logo {
		margin: 120px auto;
	}
	.grout-key-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	@media (max-width: 1024px) {
		.grout-key-header .img-content {
			margin: 10px auto;
		}
		.grout-key-header .img-tiles {
			margin: 40px auto;
		}
		.grout-key-header .img-logo {
			margin: 60px auto;
		}
	}

	
	/* social share */
	.share-header .slider {
		text-align: center;
	}
	.share-header .img-share {
		width: 700px;
		margin-top: 60px;
	}
	.share-header .img-title {
		margin: 20px auto;
	}
	.share-header .img-button {
		display: inline-block;
		padding: 5px;
		margin: 5px;
	}
	.share-header .img-logo {
		margin: 120px auto;
	}
	.share-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	.share-button-twitter, 
	.share-button-pintrest {
    display: inline;
    position: relative;
	}
	.share-button-pintrest {
    top: -6px;
	}

	@media (max-width: 1024px) {
		.share-header .img-share {
			width: 600px;
			margin-top: 30px;
		}
		.share-header .img-content {
			margin: 10px auto;
		}
		.share-header .img-logo {
			margin: 60px auto;
		}
	}
	/* order */
	.order-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	.order-section {
		background-color: #000;
	}
	.order-section .container-fluid {
		background-color: #000;
		margin: 0 60px;
	}
	.order-section .order {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.order-section .add-order {
		margin-bottom: 40px;
	}
	.order-section .add-order .pull-right {
		padding-top: 40px;
	}
	.order-section ul {
		border: 1px solid #eee;
		height: 100px;
		padding: 0;
		color: #fff;
		font-size: 22px;
		letter-spacing: 0.2em;
	}
	.order-section ul li {
		display: inline-block;
		float: left;
		height: 100%;
	}
	.order-section ul li:first-child,
	.order-section ul li:last-child {
		margin-right: 20px
	}
	.order-section ul li .img-responsive {
		height: 100%;
	}
	.order-section ul li .img-tile {
		margin-right: 20px;
		padding: 20px 0;
	}
	.order-section ul li .img-border {
		margin-right: 70px;
	}
	.order-section ul li input {
		background-color: transparent;
		border: 1px solid #fff;
		width: 100px;
		text-align: center;
		padding: 20px 0;
	}
	@media (max-width: 1024px) {
		.order-section ul {
			font-size: 14px;
		}
	}
	/* border */
	.border-section {
		background-color: #000;
	}
	.border-section .container-fluid {
		background-color: #000;
		margin: 40px 60px;
	}
	.border-section .borders {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.border-section .borders a {
		margin: 0 -2px;
	}
	.border-section .borders img {
		max-width: 6.667%;
	}
	.border-section .borders img.selected {
		border-right: 2px solid #000;
		border-left: 2px solid #000;
	}
	.border-section .add-order {
		margin-bottom: 40px;
	}
	.border-section .add-order .pull-left {
		padding-top: 10px;
	}
	.border-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	@media (max-width: 1024px) {
	}

	
	/* User settings */
	.settings-header .img-title {
		margin: 60px auto 20px;
	}
	.settings-header .container {
		width: 80%;
	}
	.settings-header .img-delete {
	    position: absolute;
	    bottom: 30px;
	    right: 0;
	}
	.settings-header .tile {
	    position: relative;
	    max-width: 18%;
	    max-width: calc(20% - 20px);
	    float: left;
	    margin: 10px;
	}
	.settings-header .img-tile {
	    max-width: 100%;
	}
	.settings-header .tile .name {
		color: #fff;
		text-transform: uppercase;
		height: 30px;
		line-height: 30px;
		font-size: 22px;
		letter-spacing: 0.2em;
		padding-top: 5px;
	}
	.settings-close a img {
		float: right;
	    margin-right: 50px;
	    margin-top: 30px;
	}
	.settings-logo img {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	@media (max-width: 1024px) {
		.settings-header .img-title {
			margin: 30px auto 10px;
		}
		.settings-header .tile .name {
		    font-size: 14px;
		}
	}
	
	
	
	.row.loading {
		background-color: #000;
		position: absolute;
		z-index: 11;
		width: 100%;
	}
	.preview-section .row.loading {
		margin: 0;
	}

	.ng-hide-add,
	.ng-hide-remove {
	    display: block !important;
	}
	.row.out  {
	    -webkit-transition: 0.5s linear opacity;
		-moz-transition: 0.5s linear opacity;
		-ms-transition: 0.5s linear opacity;
		-o-transition: 0.5s linear opacity;
		transition: 0.5s linear opacity;
	    opacity: 1;
	}
	.row.out.ng-hide {
	    opacity: 0;
	}



	
	/* color */
	.color-section .col-sm-4 {
		float: left;
	    padding: 0;
	}
	.color-section .col-sm-6 {
	    float: right;
	    padding: 0;
	}
	.color-section #wrapper {
		margin-top: 10px;
	}
	.color-section #wrapper div {
		background-image: none !important;
		height: 0 !important;
		width: 0 !important;
	}
	.color-section #wrapper map area {
		cursor: pointer;
	}
	.color-section #wrapper a {
		position: relative;
	}
	.color-section #wrapper #dynamic-tile {
		margin-bottom: 30px;
		cursor: pointer;
	}
	
	
	.color-section .well {
	    background-color: #fff;
	    border: 1px solid #000;
	    border-radius: 0;
	    box-shadow: none;
	    color: #000;
	    padding: 0;
	    margin-bottom: 10px;
	}
	.color-section .well > img {
		width: 100%;
	}
	.color-section .well input[type="checkbox"] {
		display: none;
	}
	.color-section .nav-tabs {
	    border-bottom: medium none;
	    position: absolute;
	    top: 140px;
	}
	@media (max-width: 1024px) {
		.color-section .nav-tabs {
		    top: 70px;
		}
	}
	.color-section .nav-tabs > li {
	    display: block;
	    float: none;
	}
	.color-section .nav-tabs > li > a {
		border: none !important;
		border-radius: 0 !important;
		padding: 0;
		display: inline-block;
	}
	.color-section .nav-tabs > li.active > a,
	.color-section .nav-tabs > li.active > a:hover,
	.color-section .nav-tabs > li.active > a:focus,
	.color-section .nav-tabs > li > a:hover,
	.color-section .nav-tabs > li > a:focus {
		background-color: transparent;
	}
	.color-section .form-group {
	    margin-bottom: 0;
	    padding: 0 0 10px 10px
	}
	.color-section .form-group.grout {
		padding: 10px 0 10px 10px;
	}
	.color-section .form-group.rotation {
		padding: 10px 5px 10px 10px;
	}
	.color-section .checkbox-inline {
		width: 25%;
		padding: 0;
	}
	.color-section .form-group.rotation .checkbox-inline {
		width: 50%;
	}
	.color-section .checkbox-inline {
		margin-left: -3px;
		margin-top: -3px;
	}
	.color-section .checkbox-inline img {
		width: 100%;
		border: 3px solid transparent;
		background-color: transparent;
	}
	 .color-section .checkbox-inline img.active {
		border-color: #000;
		background-color: #000;
	}
	
	
	/* preview */
	.preview-section {
		position: relative;
	}
	.preview-section .row-absolute {
		bottom: 0;
		left: 0;
		margin: 0 auto;
	  	position: absolute;
		right: 0;
		width: 90%;
	}
	.preview-section .row-absolute > div{
		padding-bottom: 30px;
	}
	.preview-section .col-absolute {
		bottom: 0;
		right: 0;
	  	position: absolute;
	}
	.preview-section .nav-tabs {
	    border-bottom: none;
	    margin-bottom: 30px;
	 }
	.preview-section .nav-tabs.no-margin {
		margin-bottom: 0;
	}
	.preview-section .nav-tabs > li {
		width: 33.334%;
	}
	.preview-section .nav-tabs > li > a {
		border-radius: 0;
		padding: 8px;
	}
	.preview-section .nav-tabs > li > a:hover,
	.preview-section .nav-tabs > li > a.active {
		border-color: #fff;
		background-color: #fff;
	}
	.preview-section .nav-tabs > li > a > img {
		width: 100%;
	}
	@media (max-width: 1024px) {
		.preview-section .nav-tabs {
		    margin-bottom: 20px;
		 }
		.preview-section .nav-tabs > li > a {
			padding: 4px;
		}
		
	}
	.preview-section .img-canvas {
		min-width: 100%;
	}
	.preview-section .bg-canvas {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		width:100%;
	}

	
	
	/* login */
	.login-header .container {
		margin-top: 30px;
	}
	
	.login-header .login-close a img {
		float: right;
	}
	
	.login-section .row {
		margin: 0;
	}
	
	.login-section {
		background-color: transparent;
		margin-top: 60px;
	}
	
	.login-section .nav-tabs {
	    border-bottom: none;
	    display: inline-block;
	}
	
	.login-section  .nav-tabs > li {
	    margin: 0 4px -12px;
	}
	
	.login-section .tabbable {
		margin-bottom: 30px;
	}
	
	.login-section .tabbable .well {
	    background-color: transparent;
	    border: 2px solid #fff;
	    border-radius: 0;
	    box-shadow: none;
	    margin: 0 auto;
	    min-height: 20px;
	    padding: 80px;
	    display: inline-block;
	}
	
	@media (max-width: 1024px) {
		.login-section {
			margin-top: 30px;
		}
		.login-section .tabbable .well {
		    padding: 40px;
		}
	}
	
	.login-section .tabbable .well .img-title {
		margin-top: 10px;
		margin-bottom: 24px;
	}
	
	.login-section .tabbable .well .form-group {
	    margin: 0 auto 15px;
	    overflow: visible;
	    position: relative;
	}
	
	.login-section .tabbable .well .form-group:last-child {
		margin-bottom: 0;
	}
	
	.login-section .tabbable .well .form-control {
	    background-color: transparent;
	    border: 1px solid #fff;
	    color: #fff;
	    border-radius: 0;
	    font-size: 22px;
	    letter-spacing: 0.2em;
	    padding-left: 40px;
	    height: 100%;
	}
	@media (max-width: 1024px) {
		.login-section .tabbable .well .form-control {
		    font-size: 14px;
		    padding-left: 20px;
		}
	}
	
	.login-section .tabbable .well .form-control:first-child {
	    float: left;
	}
	
	.login-section .tabbable .well .form-control {
	    float: right;
	    display: inline-block;
	}
	
	.login-section .tabbable .well .input-50 {
		width: 49%;
	}
	
	.login-section .tabbable .well .input-20 {
		width: 20%;
	}
	
	.login-section .tabbable .well .input-30 {
		width: 27%;
	}
	
	.login-section .tabbable .well .input-30 section {
		width: 100%;
	}
	
	.login-section .form-control::-moz-placeholder {
	    color: #fff;
	}
	
	.login-section .form-control::-webkit-input-placeholder {
		color: #fff;
	}
	
	.login-section .tabbable .well button {
	    background-color: transparent;
	    border: medium none;
	    padding: 0;
	    opacity: 1;
	}
	
	.login-section .tabbable .well button.disabled {
		opacity: 0.5;
	}
	
	.login-section .tabbable .well .form-control.has-error {
	    border-color: #a94442;
	}
	
	.login-section .tabbable .well .help-block {
		min-height: 30px;
		color: #a94442;
		text-transform: uppercase;
		font-size: 22px;
		letter-spacing: 0.05em;
	}
	.login-section .tabbable .well .help-block span {
		font-size: 18px;
		padding: 4px;
	}
	@media (max-width: 1024px) {
		.login-section .tabbable .well .help-block {
			font-size: 14px;
		}
		.login-section .tabbable .well .help-block span {
			font-size: 10px;
			padding: 2px;
		}
	}
	

	.login-section .nav-tabs > li > a {
		border: none !important;
		border-radius: 0 !important;
		padding: 0;
		display: inline-block;
	}
	.login-section .nav-tabs > li.active > a,
	.login-section .nav-tabs > li.active > a:hover,
	.login-section .nav-tabs > li.active > a:focus,
	.login-section .nav-tabs > li > a:hover,
	.login-section .nav-tabs > li > a:focus {
		background-color: transparent;
	}
	
	/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	    .login-section select {padding-right:18px}
	}
	
	.login-section select {
		display: inline-block;
		cursor: pointer;
	}

	.login-section label {
		position:relative;
		width: 100%;
		height: 100%;
		margin: 0;
		font-weight: 300;
	}
	
	.login-section label:after {
	    content:'';
	    background: url("../img/login/UI_Button_Select.png") no-repeat right center;
	    background-color: #fff;
	    right:0;
	    top:0;
	    width:65px;
	    height:100%;
	    position:absolute;
	    display:block;
	    pointer-events: none;
	}
	
/* page transitions */
.navbar {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 10;
}
.slide {
	width: 100%;
}
.slide.ng-leave, .slide.ng-enter {
	-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-ms-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	position:absolute;
	left: 0;
	right: 0;
}
.slide.left.ng-enter,
.slide.right.ng-leave.ng-leave-active {
	left: 100%;
	opacity: 1;
}
.slide.left.ng-enter.ng-enter-active,
.slide.left.ng-leave,
.slide.right.ng-enter.ng-enter-active,
.slide.right.ng-leave {
	left:0;
	opacity: 1;
}
.slide.left.ng-leave.ng-leave-active,
.slide.right.ng-enter {
	left: -100%;
	opacity: 1;
}
.slide.up.ng-enter,
.slide.up.ng-leave.ng-leave-active {
	top: 100%;
	opacity: 1;
}
.slide.up.ng-enter.ng-enter-active,
.slide.up.ng-leave {
	top:0;
	opacity: 1;
}