/* Custom font ttf file used for application */
/*@font-face { font-family: "Century Gothic"; src: url('../fonts/century-gothic.ttf'); }*/


/* Body settings */
body {
  padding: 0;
  /*background: linear-gradient(#838588, #48494a);*/
  width:100%;
  height:100%;
  overflow-y:hidden;
  font-family: 'Montserrat', sans-serif;
  font-weight:200;
}
h4 {
	font-size: 1.4em;
	font-weight: 400;
	margin: .2em 0 1em 0;
}
.fl_logo {
	position: absolute;
	top: 15%;
	left: 80%;
	width: auto;
	z-index: 9;
}
.blueBkg {
  padding: 0;
  /*width:1920px;
  height:1080px;*/
  width:100%;
  height:100%;
  background: linear-gradient(120deg, #4e82af 800px, #85bfc4);
  color:#fff;
}
.whiteBkg {
  background: #fff;
  color:#0085B1;
}
.imgRoundCorners {
	border-radius: 30px;
}
.animatedMultiBkgrnd {
	position: absolute;
	width: 60%;
	height: 100%;
	top: 0;
	background: linear-gradient(120deg, #4e82af 800px, #85bfc4);
	animation: slide .5s linear;
}
.profilePhoto {
	width: 200px;
	border-radius: 12px;
}
.animatedProfilePhoto {
	position: absolute;
	width: 200px;
	top: 800px;
	left: 1650px;
	animation: slideFrmRight 2s linear;
	z-index: 99;
}


@keyframes slide {
  from { transform: translateX(-600px); }
  to { transform: translateX(0px);
  }
}
@keyframes slideFrmRight {
  from { transform: translateX(2100px); }
  to { transform: translateX(0px);
  }
}


.whiteText {color: #fff;}
.blueText {color: #0085B1;}
.hamburgerColor {color: #ddd;}
.clr {clear: both; margin: auto 0;}

.centerContent {align-content: center; text-align: center;}

.successButton {border: 1px solid white; border-radius: 12px !important; background: linear-gradient(120deg, #4e82af 0%, #85bfc4 100%); color: #fff; }
.dangerButton {border: 1px solid white; border-radius: 12px !important; background: linear-gradient(120deg, #d72a7c, #7c2c82); color: #fff; }

.StartOver {
	position:absolute;
	top:20px;
	left:1780px;
	width: 120px;
	height: 26px;
	cursor: pointer;
	z-index: 99;
}
.progressBar {
	position:absolute;
	margin:955px 0 0 35%;
	width: 450px;
	height: 17px;
	border: 1px solid #479dbe;
	border-radius: 12px;
	color: #fff;
	opacity:.6;
	z-index: 1;
}
.progressBar > span {
	height: 100%;
	display:block;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-top-left-radius: 17px;
	border-bottom-left-radius: 17px;
	background:#479dbe;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.progressHeader {
	position: absolute;
	font-size: 12px;
	color: #626262;
	margin: -22px 0 0 43%;
}


.header_lg {
	position: relative;
	font-size: 3.5em;
	line-height: 1.3em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 200;
}
.header_lg_anim {
	position: relative;
	font-size: 3.5em;
	line-height: 1.3em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 200;
	animation: slide .8s linear;
}
.normalCopy {
	font-size: 1em;
	font-weight: 200;
	line-height: 1.7em;
}
.disclaimerCopy {
	margin-top: 2em;
	font-size: .8em;
	font-style: italic;
	font-weight: 100;
	line-height: 1.3em;
}
.spinningClockTopRight {
	position: relative;
	float: right;
	margin:8%;
	width: 75px;
	z-index: 9;
}
.CenteredError {text-align: center; color: red; position: absolute; width:100%; top: 40%;}


.homeTouchButton {font-size: 50px; color:#fff; border: #fff 1px solid; border-radius: 20px; background-color: rgba(255, 255, 255, 0.2);}
.homeTouchButton:hover {background-color: rgba(255, 255, 255, 0.5); color: #4e82af;}

.formDefaultStyle {background-color: transparent;border: none; font-size: 24px;}
.formDropdownStyle {background-color: transparent;border: none; font-size: 22px;color:#626262; font-weight: 200;}
.dropDownText {color:#626262;line-height: 1.2em;font-size:16px;}


/* Body Column Styles */
	.rowFluid {width:100%;float: left;}
	/* 6 column layout */
	.column1 {width: 16%;float: left;}
	.column2 {width: 32%;float: left;}
	.column3 {width: 46%;float: left;}
	.column4 {width: 64%;float: left;}
	.column5 {width: 80%;float: left;}
	.column6 {width: 100%;}
	/* 12 column layout */
	.column12_1 {width: 8%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_1_5 {width: 12%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_2 {width: 16%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_2_5 {width: 20%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_3 {width: 24%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_3_5 {width: 28%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_4 {width: 32%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_5 {width: 40%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_5_5 {width: 44%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_6 {width: 48%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_6_5 {width: 52%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_7 {width: 56%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_8 {width: 64%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_9 {width: 70%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_10 {width: 78%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_11 {width: 86%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}
	.column12_12 {width: 100%;min-width: 50px;float: left;margin:1em 0 1em 0;position: relative;}

	.paddingRight {margin-right: 1.5em;}
	.paddingLeft {margin-left: 1.5em;}
	.paddingRightHalf {margin-right: .7em;}
	.paddingLeftHalf {margin-left: .7em;}



/** BOTTOM SECTION **/
.center_section_bottom {
	position: absolute;
	top: 87%;
	left: 0;
	width: 68%;
	font-size: 2em;
	z-index: 9;
}
.right_button {
	position:absolute;
	margin:920px 8em 0 1350px;
	width: auto;
	z-index: 98;
}
.right_button:hover {
	opacity: .80;
}
.right_button_overlay {
	position: absolute;
	margin:920px 8em 0 1350px;
	width: auto;
	z-index: 999;
}
.right_button_overlay:hover {
	opacity: .80;
}
.left_button {
	float:left;
	font-size: 2em;
	margin:920px 0 0 7%;
	width: auto;
	z-index: 9;
}
.left_button:hover {
	opacity: .80;
}

/** LOGIN page Styles **/
.login_text_block {
	width:55%;
	position: absolute;
	top: 12%;
	left: 9%;
	z-index: 0;
}
.login_header_lg {
	position: relative;
	font-size: 6em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 200;
}
.login_sub_head{
	font-size: 3em;
	margin: 1.5em 0 0 0;
	line-height: 1.5em;
}
/** END LOGIN page Styles **/


/** Welcome page Styles **/
.welcome_text_block {
	width:30%;
	position: absolute;
	top: 10%;
	left: 7%;
	z-index: 0;
}
.welcome_header_lg {
	position: relative;
	font-size: 6em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 100;
}
.welcome_sub_head {
	font-size: 3em;
	margin: 1em 0 0 0;
	line-height: 1.3em;
}
/** END Welcome page Styles **/

/** Patient Info **/
.patients_text_block {
	width:85%;
	position: absolute;
	top: 10%;
	left: 7%;
	z-index: 0;
}
.patients_header_lg {
	position: relative;
	font-size: 4.5em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 200;
}
.HIPPA_block {
	position: absolute;
	top: 27%;
	left: 60%;
	min-width: 450px;
	width: 550px;
	z-index: 9;
}
.HIPPA_text {
	margin-left: 2em;
	font-size: 1.2em;
	color: #848484;
}
.HIPPA_checkbox_block {
	position: absolute;
	top: 27%;
	left: 58%;
	width: 51px;
	height: 51px;
	z-index: 9;
}
#hipaa_consent {
  display: none;
}
.checkbox_image {
  background-image: url('/images/form-fields/checkboxes-sq-rnd-corners.png');
  background-position: left center;
  background-size: auto 100%;
  width: 51px !important;
  height: 51px;
  background-repeat: no-repeat;
  margin-top:-5px;
  z-index: 99;
}
#hipaa_consent:checked + .checkbox_image {
  background-position: right center;
}
.patient_error_message {
	font-size: 2em;
	margin: 1.5em 0 0 0;
	line-height: 1.5em;
}
/** END Patient Info **/

/** Choose Shoe Page **/
.choose_text_block {
	width:85%;
	position: absolute;
	top: 10%;
	left: 7%;
	z-index: 0;
}
.Shoe_Selection_block {
	position: absolute;
	top: 22%;
	left: 7%;
	width: 90%;
	height: auto;
	z-index: 9;
}
#choice_heels {
  display: none;
}


.shoe_choice_box {
	position:absolute;
	z-index: 9;
}
.shoe_choice_image {
	position:relative;
	top:0;
	left:0;
	margin-bottom:20px;
	max-width: 271px;
	z-index: 1;
}
.shoe_choice_text {
	font-size: 1.2em;
	font-family: 'Montserrat', sans-serif;
	padding: 0;
	width: 100%;
	text-align: center;
}

.chooseText {font-size: 18px; font-weight: 200; text-align: center; align-content: center;}
.chooseTextSmall {font-size: 14px; font-weight: 200; text-align: center; align-content: center;}

/** END Choose Shoe Page **/


/** Scan Page **/
.scan_text_block {
	position: absolute;
	top: 10%;
	left: 7%;
	width:85%;
	z-index: 0;
}
.scan_text_block_two {
	position: absolute;
	top: 8%;
	left: 7%;
	width:85%;
	z-index: 0;
}
.scan_middle_text_block {
	position: absolute;
	top: 35%;
	left: 7%;
	width:90%;
	font-size: 2em;
}

.scan_middle_text_block_two {
	position: absolute;
	top: 25%;
	left: 7%;
	width:90%;
	font-size: 2em;
}


/** END Scan Page Styles **/


/*** Photo page ***/
.countDownSVG {
	position: relative;
	float: right;
	margin:8%;
	width: 75px;
	z-index: 9;
}

/*** END Photo page ***/

/** Reports Page **/
.report_header_block {
	position: absolute;
	top: 10%;
	left: 7%;
	width:85%;
	z-index: 0;
}
.results_content {
	position: absolute;
	top: 22%;
	left: 7%;
	width:90%;
	z-index: 0;
}
.suggestive_selling_content {
	position: absolute;
	top: 22%;
	left: 7%;
	width:85%;
	z-index: 0;
}
.your_scan_image_left {
	position:absolute;
  width:209px;
  max-width:209px;
	top:17%;
	left:3%;
}
.your_scan_image_right {
	position:absolute;
  width:209px;
  max-width:209px;
	top:17%;
	left:38%;
}
.your_scan_image_left2 {
	position:absolute;
  width:180px;
  max-width:180px;
	top:34%;
	left:6%;
}
.your_scan_image_right2 {
  position: absolute;
  width: 180px;
  max-width: 180px;
  top: 34%;
  left: 47%;
}
.shoeSuggestion_placement {
	position:absolute;
	top:61%;
	left:7%;
}
.other_shoe_border {
	position:absolute;
	margin: auto 0;
	padding: 15px 0 0 25px;
	max-width: 250px;
}
.other_orthotic_text {
	font-size: 1.5em;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	padding: 0;
	width: 100%;
	padding: 2em 10% 5px 10%;
	text-align: center;
}
.other_orthotic_description {
	font-size: 1.5em;
	font-family: 'Montserrat', sans-serif;
	padding: 0;
  white-space: pre-line;
	width: 100%;
	padding: 10px 10% 0 15%;
	text-align: left;
}
.other_orthotic_border {
	position:absolute;
	margin: auto 0;
	padding: 20px 0 0 25px;
	max-width: 380px;
}
.your_results_score {
	position:absolute;
	top:74px;
	left:25px;
	font-size: 4em;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #fff;
}
.your_results_recommendation {
	position:absolute;
	top:82px;
	left:153px;
	width: 300px;
	font-size: 1.8em;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
	line-height: 1.3em;
}
.your_results_score2 {
	position:absolute;
	top:80px;
	left:20px;
	font-size: 4em;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #fff;
}
.your_results_recommendation2 {
	position:absolute;
	top:90px;
	left:140px;
	width: 300px;
	font-size: 1.8em;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
	line-height: 1.3em;
}
.results_crooked_man {
	position:absolute;
	top:75px;
	left:500px;
	width: 200px;
}
.results_description {
	margin-top: 2em;
	width:80%;
	color:#0085B1;
	font-size: 1.5em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}
.shortDescription {
	margin-top: 1.7em;
	width:85%;
	color:#0085B1;
	white-space: pre-line;
	font-size: 1.4em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}
.results_sub_head {
	font-size: 2.5em;
}
.closeButton {
	margin:8em 0 0 1115px;
	z-index: 999;
}
.closeButton img {
	width:70px;
}

/** END Reports styles **/

/*** Orthotics work and play pop-up **/
.popup_sub_head {
	font-size: 2em;
	color: #fff;
	width:85%;
	margin: 1.5em 0 0 0;
	line-height: 1.5em;
}

/** Catalog Custom styles **/
.addItem {margin:.6em 0;}
.catalog_prod_desc {
	font-size: 16px;
	/*white-space: pre-wrap;*/
	white-space: pre-line;
	margin: 1em 0 1em 1em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	text-align: right;
	line-height: 1.2em;
}
.catalog_prod_desc_modal {
	font-size: 16px;
	white-space: pre-line;
	margin: 1em 0 1em 1em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	text-align: left;
	line-height: 1.2em;
}
.catalog_prod_desc_more {
	font-size: 16px;
	margin: 1em 0 1em 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	text-align: right !important;
}





html, body {
  height: 100%;
}


/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Overrides bootstrap rounded corners on all buttons */
.btn {
  border-radius: 0;
}

.btn-success {
  background: green;
}

.btn-hamburger, .btn-hamburger:focus, btn-hamburger:hover {
  background-color: transparent;
  border-color: transparent;
  color: white;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Bottom bar attributes */
.table-full-length {
  width: 100%;
  background-color: #333333;
}
.bottom-bar-cell {
  border-color: grey;
  border-style: solid;
  border-width: thin;
  background-color: inherit;
}
.bottom-bar-cell-selected {
  background-color: green;
  border-color: grey;
  border-style: solid;
  border-width: thin;
}
.bottom-bar-label {
  margin-left: 10px;
  margin-top: 1px;
  margin-bottom: 1px;
  color: white;
  text-align: left;
}
.bottom-bar-value {
  color: white;
  text-align: center;
}

.container-narrow > hr {
  margin: 30px 0;
}

/* Override bootstrap thumbnails */
.thumbnail-inverse {
  border-radius: 0;
  color: white;
  background-color: #333333;
  height: 200px;
  border: none;
}
.thumbnail-side-menu {
  height: 50px;
  text-align: right;
}
.addmargin {
  margin-left: 20px;
  margin-top: 20px;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  background-color: white;
}
/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Prevent underlining and blue a links */
a:hover {
  text-decoration:none;
  color: inherit;
  background-color: lightgray;
}
a {
  color: inherit;
}

/* fixes the width of the Input text box label on Patient Info popup */
.input-group-addon {
    min-width:140px;
    text-align:left;
}

/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
  border-bottom: 0;
}
/* Remove the default bottom margin of .jumbotron */
.jumbotron.vertical-center-transparent {
  margin-bottom: 0;
  background-color: transparent;
}

/* Make the bootstrap container background transparent instead of white */
.container-transparent {
  background: transparent;
}


.vertical-center-transparent {
  min-height: 100%;  /* Fallback for vh unit */
  height: 65vh; /* You might also want to use
                        'height' property instead.

                        Note that for percentage values of
                        'height' or 'min-height' properties,
                        the 'height' of the parent element
                        should be specified explicitly.

                        In this case the parent of '.vertical-center'
                        is the <body> element */

  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Align the bootstrap's container vertically */
  -webkit-box-align : center;
  -webkit-align-items : center;
  -moz-box-align : center;
  -ms-flex-align : center;
  align-items : center;

  /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
  width: 100%;

  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.

     Therefore, we should use the following declarations to get it centered again */
   -webkit-box-pack : center;
   -moz-box-pack : center;
   -ms-flex-pack : center;
   -webkit-justify-content : center;
   justify-content : center;

}

/* Creates a borderless table */
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
    border: none;
}


.foot-icon {
  background-image: url("../images/FootIcons.png");
  background-position: center center;
  background-repeat: no-repeat;
}

/*.heightmap {
  width: 300px;
  height: auto;
}*/

.rotate180 {
  transform: rotate(180deg);
}

.vertical-align {
    display: flex;
    align-items: center;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus {
    color: white;
    background-color: green;
}

.nav-pills > li.active > a:hover {
    background-color: green;
    color:white;
}

/*************** Angular Animations *****************/
.page {

}


/* contact ---------------------- */
.page-animate-up.ng-leave      {
	-webkit-animation: slideOutUp 0s both ease-in;
	-moz-animation: slideOutUp 0s both ease-in;
	animation: slideOutUp 0s both ease-in;
}
.page-animate-up.ng-enter 		{
    -webkit-animation:slideInUp 0.5s both ease-in;
	-moz-animation:slideInUp 0.5s both ease-in;
	animation:slideInUp 0.5s both ease-in;
}

.panel-transparent {
    background: none;
}

.panel-transparent .panel-heading{
    background: rgba(46, 51, 56, 0.2)!important;
}

.panel-transparent .panel-body{
    background: none;
}

.panel-transparent .panel-footer{
    background: rgba(46, 51, 56, 0.2)!important;
}

.order-button-normal {
  width: 200px;
  background-color: #333333;
  border-color: grey;
  border-style: solid;
  border-width: thin;
  background-color: inherit;
}
.order-button-selected {
  width: 200px;
  background-color: green;
  border-color: grey;
  border-style: solid;
  border-width: thin;
}

.ng-modal-overlay {
  /* A dark translucent div that covers the whole screen */
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#777777;
  opacity: 0.8;
}

.ng-modal-dialog {
  /* A centered div above the overlay with a box shadow. */
  z-index:10000;
  position: absolute;
  width: 50%; /* Default */

  /* Center the dialog */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);

  background-color: #fff;
  box-shadow: 4px 4px 80px #000;
}

.ng-modal-overlay-white {
  /* A bright translucent div that covers the whole screen */
  position:absolute;
  z-index:97;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#fff;
  opacity: 0.85;
}

.ng-modal-dialog-new {
  /* A centered div above the overlay with a box shadow. */
  z-index:99;
  position: absolute;
  width: 50%; /* Default */

  /* Center the dialog */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);

  background-color: #fff;
  box-shadow: 4px 4px 80px #000;
}

.ng-modal-dialog-content {
  padding:10px;
  text-align: left;
}

.ng-modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  font-size: 120%;
  display: inline-block;
  font-weight: bold;
  font-family: 'arial', 'sans-serif';
}

/* scale up */
@keyframes scaleUp {
	to 		{ opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
	to 		{ opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes scaleUp {
	to 		{ opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* scale up */
@keyframes scaleDown {
	from 		{ opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleDown {
	from 		{ opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes scaleDown {
	from 		{ opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(100%); }
	to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInRight {
	from 	{ -moz-transform:translateX(100%); }
	to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
	from 	{ -webkit-transform:translateX(100%); }
	to 		{ -webkit-transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
	from 	{ transform:translateY(100%); }
	to 		{ transform: translateY(0); }
}
@-moz-keyframes slideInUp {
	from 	{ -moz-transform:translateY(100%); }
	to 		{ -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
	from 	{ -webkit-transform:translateY(100%); }
	to 		{ -webkit-transform: translateY(0); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {
	to 		{ -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
	to 		{ -webkit-transform: translateX(-100%); }
}

/* slide in from the bottom */
@keyframes slideOutUp {
  from  { transform: translateY(0); }
	to 		{ transform: translateY(-100%); }
}
@-moz-keyframes slideOutUp {
  from  { -moz-transform: translateY(0); }
	to 		{ -moz-transform: translateY(-100%); }
}
@-webkit-keyframes slideOutUp {
  from  { -webkit-transform: translateY(0); }
	to 		{ -webkit-transform: translateY(-100%); }
}


.div-show-hide {
  transition: all linear 1.0s;
}
.div-show-hide.ng-hide {
  transition: all linear 0s;
  opacity: 0;
}

.content {
  position: relative;
  width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.content iframe {
  width: 100%;
  display: block;
}
.content:before {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


.ninety{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.mirror{
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.mirror-ninety{
  -webkit-transform: scale(-1, 1) rotate(-90deg);
  -moz-transform: scale(-1, 1) rotate(-90deg);
  -ms-transform: scale(-1, 1) rotate(-90deg);
  -o-transform: scale(-1, 1) rotate(-90deg);
  transform: scale(-1, 1) rotate(-90deg);
}

.center-video-img {
  margin-top: 200px;
  display: block;
  margin: auto;
  width: 40%;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.ui-keyboard-space {
  width: 750px;
}
.ui-keyboard-tab {
  width: 99px;
}
.ui-keyboard-lock {
  width: 130px;
}

.ui-keyboard-shift {
  width: 181px;
}

.ui-keyboard-enter {
  width: 143px;
}

.ui-keyboard-clear {
  width: 146px;
}

.ui-keyboard-bksp {
  width: 99px;
}

/*Smaller version of keyboard. One of the two will be removed from the final build. I need to see it on an actual kiosk first though.*/
/*.ui-keyboard-space {*/
  /*width: 450px;*/
/*}*/
/*.ui-keyboard-tab {*/
  /*width: 52px;*/
/*}*/
/*.ui-keyboard-lock {*/
  /*width: 71px;*/
/*}*/

/*.ui-keyboard-shift {*/
  /*width: 105px;*/
/*}*/

/*.ui-keyboard-enter {*/
  /*width: 85px;*/
/*}*/

/*.ui-keyboard-clear {*/
  /*width: 74px;*/
/*}*/

/*.ui-keyboard-bksp {*/
  /*width: 52px;*/
/*}*/


.keyboard {
  z-index: 999;
  top: auto;
  bottom: 25px;
  left: 18%;
  position: fixed;
  width: auto;
  height: auto;
  border: 1px solid #269abc;
  background-color: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 133, 177, 0.2), 0 4px 16px 0 rgba(38, 154, 188, 0.2);
}

.keyboard__numerical {
  left: 45%;
}

.keyboard__key {
  margin: 2px;
  min-width: 85px;
  height: 68px;
  font-size: 1.5em;
  color: #0085b1;
  background-color: #fff;
  border: 1px solid #0085b1;
}

.keyboard__key--hover {
  box-shadow: 0 0 8px 1px rgba(0, 133, 177, 0.2);
}

.keyboard__key--active {
  color: #fff;
  background-color: #269abc;
}