/*
 Theme Name:   Krista Computers Kiosk
 Theme URI:    http://www.kristacomputers.com/
 Description:  Krista Computers Wordpress theme
 Author:       Krista Computers
 Author URI:   http://www.kristacomputers.com
 Template:     twentytwentyone
 Version:      0.1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentyone
*/

.united_sans { font-family: United Sans,Impact,Arial Black,"sans serif" }

.site {
  position: relative;
  min-height: 100vh;
}

#phonenum {
  font-family: Raleway;
  font-weight: 600;
  font-size: 2.0rem;
  text-shadow: 1px 1px #ccc;
  margin: -32px 0 0 -72px;
}

@media only screen and (min-width: 482px) and (max-width: 1300px) {
  #phonenum {
    margin: -26px 0 0 -3vw;
  }}

@media only screen and (max-width: 481px) {
  #phonenum {
    font-size: 1.3rem;
    text-shadow: 1px 1px #ccc;
    margin: 32px 0 0 1vw;
  }
  .userfeedback-widget .widget-theme--light .widget-position-bottom_right { display: none; }
  .userfeedback-widget.widget-theme--light.widget-position-bottom_right { display: none; }
}

.site-logo {
  margin: calc(var(--global--spacing-vertical) / 2) auto;
}
.site-logo .custom-logo {
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
    max-height: unset;
    height: unset;
    width: unset;
    display: inline-block;
}

@media only screen and (min-width: 640px) {
  .site-logo .custom-logo {
    width: calc(80px + (300 - 80) * ((100vw - 640px) / (1440 - 640)));
    max-width: 300px;
  }
}

/*
 * 
 * font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
 * 
 */

@media screen and (min-width: 640px) {
.primary-navigation a:link, .primary-navigation a:visited, .primary-navigation a:hover { 
  font-size: calc(14px + (26 - 14) * ((100vw - 640px) / (1440 - 640)));	
}}
@media screen and (min-width: 1440px) {
.primary-navigation a:link, .primary-navigation a:visited, .primary-navigation a:hover { 
  font-size: 28px;
}}

#masthead.site-header { padding-bottom: 0; }

h2.hero-text {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 35px;
  letter-spacing: 2px;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  /*min-height: 90px;*/
  white-space: nowrap;
}

@media screen and (min-width: 720px) {
  h2.hero-text {
    font-size: 60px;
    letter-spacing: 3px;
  }
}

@media screen and (min-width: 940px) {
  h2.hero-text {
    font-size: 70px;
    letter-spacing: 4px;
  }
}

#remote-support.wp-block-button a, #remote-support.wp-block-button a:hover {
	background-color: #f0ad4e;
	border-color: #f0ad4e;
}

#remote-support.wp-block-button:hover {
	border-color: #f0ad4e;
}

div#comments { display: none; }

div#our-focus {
  width: 66%;
  font-style: italic;
  margin: 0 auto;
  text-align: center;
  padding: 3%;
  margin-top: 10px;
}

ul#primary-menu-list, div#our-focus, div#footer-wrapper {
  background-color: rgba(0,0,0,0.7);
}

div#main-content {
  background-color: rgba(255,255,255,0.8);
  color: #333;
}

#colophon div.site-info { display: none; }

#colophon {
  text-align: center;
}

div#main-content {
  margin-top: 320px;
  max-width: 1152px;
  padding: 40px;
  border-radius: 5px;
  border: 1px solid #ccc;
  -moz-box-shadow:    1px 1px 8px 3px #333;
  -webkit-box-shadow: 1px 1px 8px 3px #333;
  box-shadow:         1px 1px 8px 3px #333;
}

input[type=text], textarea {
	border-radius: 5px;
}

input[type=radio], input[type=radio]:checked {
  border: 1px solid #333;
}

input[type='radio']:after {
  width: 19px;
  height: 17px;
  border-radius: 50%;
  top: 0.5px;
  left: 2px;
  position: relative;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 0;
}

input[type='radio']:checked:after {
  width: 19px;
  height: 17px;
  border-radius: 50%;
  top: 0.5px;
  left: 2px;
  position: relative;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 0;
  background-color: #0693e3;
}

a.cfwlink {
  font-size: 1.0em;
  color: #777;
  text-decoration: underline;
}

span.cfwmapicon {
  height: 16px;
  line-height: 16px;
  text-align: center;
  text-decoration: underline;
}

.material-icons {
    position: relative;
    top: 14px;
    padding: 0 5px;
	font-size: 2.6rem;
	margin-top: -16px
}

/*------------------------------
	Links
------------------------------*/
a {
	color: #03c4eb;
	text-decoration: none;
	outline: none;
}

a.phonelink {
	color: #555555;
	text-decoration: none;
	outline: none;
}

a:hover {
	text-decoration: none;
	color: #555555;
	text-decoration: underline;
}

a:active, a:focus, a:hover {
	outline: none;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgba(255,0,0,0.7);
  color: white;
  cursor: pointer;
  padding: 15px;
}

#myBtn:hover {
  background-color: #555;
}

.return-top {
	top: unset;
	padding: 0;
	line-height: 10px;
}

.FindUs, .menu-item-467 {
  background-image: url('/wp-content/uploads/2021/06/FB-f-Logo__blue_29.png');
  background-repeat: no-repeat;
  background-position: center; 
}
.FindUs a, .menu-item-467 a {
  color: #fff;
  opacity: 0.0;
}

/* Site-Partners-Slides */
div#site-partners:before { content: ' '; display: block; }
div#site-partners {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 75px, white);
}

@media only screen and (max-width: 639px) {
	#site-partners {
		display: none;
	}
}

div#quiz {
  border: 2px solid #f0ad4e;
  margin: 15px 0;
  max-width: 440px;
  text-align: center;
}

input[type=submit].wpcf7-submit {
  border: 2px solid #0693e3;
}

/* Parent theme overrides on Primary Nav menu. */
/* Primary Nav change open menu to closed at 640px */

.menu-button-container {
	display: none;
	justify-content: space-between;
	position: absolute;
	right: 0;
	padding-top: calc(0.5 * var(--global--spacing-vertical));
	padding-bottom: calc(0.25 * var(--global--spacing-vertical));
}
@media only screen and (max-width: 639px) {

	.menu-button-container {
		display: flex;
	}
}

.menu-button-container #primary-mobile-menu {
	display: flex;
	margin-left: auto;
	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
	font-size: var(--primary-nav--font-size-button);
	font-weight: var(--primary-nav--font-weight-button);
	background-color: transparent;
	border: none;
	color: var(--primary-nav--color-link);
}

.menu-button-container #primary-mobile-menu .dropdown-icon {
	display: flex;
	align-items: center;
}

.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon {
	margin-left: calc(0.25 * var(--global--spacing-unit));
}

.menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon {
	position: relative;
	top: -1px;
}

.menu-button-container #primary-mobile-menu .dropdown-icon.close {
	display: none;
}

.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open {
	display: none;
}

.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
	display: flex;
}

.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
	animation-name: twentytwentyone-close-button-transition;
	animation-duration: 0.3s;
}

.primary-navigation-open .menu-button-container {
	width: 100%;
	z-index: 500;
	background-color: var(--global--color-background);
}

.primary-navigation-open .menu-button-container #primary-mobile-menu {
	position: static;
}

.primary-navigation {
	position: absolute;
	top: var(--global--admin-bar--height);
	right: 0;
	color: var(--primary-nav--color-text);
	font-size: var(--primary-nav--font-size);
	line-height: 1.15;
	margin-top: 0;
	margin-bottom: 0;
}

.primary-navigation > .primary-menu-container {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px);
	padding-left: var(--global--spacing-unit);
	padding-right: var(--global--spacing-unit);
	padding-bottom: var(--global--spacing-horizontal);
	background-color: var(--global--color-background);
	transition: all 0.15s ease-in-out;
	transform: translateY(var(--global--spacing-vertical));
}
@media only screen and (max-width: 639px) {

	.primary-navigation > .primary-menu-container {
		height: 100vh;
		z-index: 499;
		overflow-x: hidden;
		overflow-y: auto;
		border: 2px solid transparent;
	}

	.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
		position: fixed;
		transform: translateY(0) translateX(100%);
	}

	.admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
		top: var(--global--admin-bar--height);
	}

	.admin-bar .primary-navigation > .primary-menu-container {
		height: calc(100vh - var(--global--admin-bar--height));
	}

	.primary-navigation > .primary-menu-container:focus {
		border: 2px solid var(--global--color-primary);
	}
}
@media only screen and (max-width: 639px) {

	.primary-navigation-open .primary-navigation {
		width: 100%;
		position: fixed;
		z-index: 2;
	}
}

.primary-navigation-open .primary-navigation > .primary-menu-container {
	position: absolute;
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
@media only screen and (max-width: 639px) {

	.primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
		transform: translateX(0) translateY(0);
	}
}
@media only screen and (min-width: 640px) {

	.primary-navigation {
		position: relative;
		margin-left: auto;
	}

	.primary-navigation > .primary-menu-container {
		visibility: visible;
		opacity: 1;
		position: relative;
		padding: 0;
		background-color: transparent;
		overflow: initial;
		transform: none;
	}

	.primary-navigation #toggle-menu {
		display: none;
	}

	.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul {
		display: none;
	}

	.admin-bar .primary-navigation {
		top: initial;
	}

	.admin-bar .primary-navigation > .primary-menu-container {
		top: initial;
	}
}

.primary-navigation > div > .menu-wrapper {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	max-width: none;
	padding-left: 0;
	position: relative;
}
@media only screen and (max-width: 639px) {

	.primary-navigation > div > .menu-wrapper {
		padding-bottom: 100px;
	}

	.primary-navigation > div > .menu-wrapper ul {
		padding-left: 0;
	}
}

.primary-navigation > div > .menu-wrapper li {
	display: block;
	position: relative;
	width: 100%;
}
@media only screen and (min-width: 640px) {

	.primary-navigation > div > .menu-wrapper li {
		margin: 0;
		width: inherit;
	}

	.primary-navigation > div > .menu-wrapper li:last-child {
		margin-right: 0;
	}
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
	display: flex;
	height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px);
	width: 44px;
	padding: 0;
	justify-content: center;
	align-items: center;
	background: transparent;
	color: currentColor;
	border: none;
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus {
	outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
}
@media only screen and (max-width: 639px) {

	.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
		display: none;
	}
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus,
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus {
	height: 100%;
	display: flex;
	align-items: center;
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus svg,
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus svg {
	margin-top: -1px;
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus {
	display: none;
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-minus {
	display: flex;
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-plus {
	display: none;
}

.primary-navigation > div > .menu-wrapper > li > .sub-menu {
	position: relative;
}
@media only screen and (min-width: 640px) {

	.primary-navigation > div > .menu-wrapper > li > .sub-menu {
		left: 0;
		margin: 0;
		min-width: max-content;
		position: absolute;
		top: 100%;
		padding-top: 3px;
		transition: all 0.5s ease;
		z-index: 88888;
	}

	.primary-navigation > div > .menu-wrapper > li > .sub-menu:before,
	.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		top: -10px;
		left: var(--global--spacing-horizontal);
		border-style: solid;
		border-color: var(--primary-nav--border-color) transparent;
		border-width: 0 7px 10px 7px;
	}

	.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
		top: -9px;
		border-color: var(--global--color-background) transparent;
	}

	.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
		background: var(--global--color-background);
	}

	.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left {

		/* rtl:ignore */
		left: 0;

		/* rtl:ignore */
		right: auto;
	}

	.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before,
	.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after {

		/* rtl:ignore */
		left: var(--global--spacing-horizontal);

		/* rtl:ignore */
		right: auto;
	}

	.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right {

		/* rtl:ignore */
		right: 0;

		/* rtl:ignore */
		left: auto;
	}

	.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before,
	.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after {

		/* rtl:ignore */
		left: auto;

		/* rtl:ignore */
		right: var(--global--spacing-horizontal);
	}
}

.primary-navigation .primary-menu > .menu-item:hover > a {
	color: var(--primary-nav--color-link-hover);
}
@media only screen and (min-width: 640px) {

	.primary-navigation .primary-menu-container {
		margin-right: calc(0px - var(--primary-nav--padding));
		margin-left: calc(0px - var(--primary-nav--padding));
	}

	.primary-navigation .primary-menu-container > ul > .menu-item {
		display: flex;
	}

	.primary-navigation .primary-menu-container > ul > .menu-item > a {
		padding-left: var(--primary-nav--padding);
		padding-right: var(--primary-nav--padding);
	}

	.primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle {
		margin-left: calc(5px - var(--primary-nav--padding));
	}
}

.primary-navigation a {
	display: block;
	font-family: var(--primary-nav--font-family-mobile);
	font-size: var(--primary-nav--font-size-mobile);
	font-weight: var(--primary-nav--font-weight);
	padding: var(--primary-nav--padding) 0;
	text-decoration: none;
}
@media only screen and (min-width: 640px) {

	.primary-navigation a {
		display: block;
		font-family: var(--primary-nav--font-family);
		font-size: var(--primary-nav--font-size);
		font-weight: var(--primary-nav--font-weight);
	}
}

.primary-navigation a + svg {
	fill: var(--primary-nav--color-text);
}

.primary-navigation a:hover,
.primary-navigation a:link,
.primary-navigation a:visited {
	color: var(--primary-nav--color-link-hover);
}

.primary-navigation a:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
}

.primary-navigation a:focus {
	position: relative;
	z-index: 99999;
	outline-offset: 0;
	text-decoration-thickness: 2px;
}

.primary-navigation .current-menu-item > a:first-child,
.primary-navigation .current_page_item > a:first-child {
	text-decoration: none;
	/*text-decoration-style: solid;*/
}

.primary-navigation .current-menu-item > a:first-child:hover,
.primary-navigation .current_page_item > a:first-child:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
}

.primary-navigation .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: var(--primary-nav--padding);
	border: 1px solid var(--primary-nav--border-color);
}

.primary-navigation .sub-menu .sub-menu {
	border: none;
}
@media only screen and (min-width: 640px) {

	.primary-navigation .sub-menu > .menu-item > .sub-menu {
		padding: 0;
	}
}
@media only screen and (max-width: 639px) {

	.primary-navigation .sub-menu .menu-item:last-child {
		margin-bottom: 0;
	}
}

.primary-navigation .sub-menu .menu-item > a {
	padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
	display: block;
	font-size: var(--primary-nav--font-size-sub-menu-mobile);
	font-style: var(--primary-nav--font-style-sub-menu-mobile);
}
@media only screen and (min-width: 640px) {

	.primary-navigation .sub-menu .menu-item > a {
		font-size: var(--primary-nav--font-size-sub-menu);
		font-style: var(--primary-nav--font-style);
	}
}

.primary-navigation .menu-item-has-children > .svg-icon {
	display: none;
}
@media only screen and (min-width: 640px) {

	.primary-navigation .menu-item-has-children > .svg-icon {
		display: inline-block;
		height: 100%;
	}

	.primary-navigation .menu-item-has-children .sub-menu .svg-icon {
		display: none;
	}
}

.primary-navigation .menu-item-description {
	display: block;
	clear: both;
	font-size: var(--global--font-size-xs);
	text-transform: none;
	line-height: 1.7;
}

.primary-navigation .menu-item-description > span {
	display: inline-block;
}

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

	.lock-scrolling .site {
		position: fixed;
		max-width: 100%;
		width: 100%;
	}
}

/* New Customer Link */
#newcustomer {
  display: block;
  position: fixed;
  top: 20px;
  right: 80px;
  font-size: 3rem;
  opacity: 33%;
  padding: 10px;
}

.page-id-5945 .entry-header { display: none; }
.page-id-5945 iframe { position: relative; top: -66px; min-height: 80vh; }

article#post-1 header, article#post-1 footer { display: none; }



/* Custom Teamviewer Download */
.modal {
  height: 75vh;
  max-width: 75vw;
}
.modal > * {
  margin: 0 0 0.5rem 0;
}

.modal::-webkit-backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* extra styling */
body {
  min-height: 100vh;
  margin: 2rem;
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

h1 em {
  color: var(--cyan-9);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.modalbutton {
  border: 0;
  cursor: pointer;
/*  background: var(--gray-8);*/
/*  color: var(--gray-2);*/
  font-weight: 700;
/*  padding: var(--size-2) var(--size-4);*/
}

.site .button:not(:hover):not(:active):not(.has-background) {
  background-color: rgba(255,255,255,0);
}

/*.modalbutton:hover,
.modalbutton:focus {
  background: var(--cyan-9);
}*/

.close-button {
    display: block;
    margin: 0 auto;
    border: 2px solid #595959;
    border-radius: 4px;
    padding: 8px;
}

#modal-container {
  width: 75%;
  margin: 0 auto;
  overflow: hidden;
  -ms-overflow-style: none;
}

.fas, .svg-inline--fa {
  color: red;
  position: absolute;
}
#lowerleft {
  bottom: 10px;
  left: 10px;
}
#upperright {
  position: fixed;
  top: 30px;
  right: 40px;
}


.page-id-2 .entry-header { display: none; }

.wp-post-modal.show {
	background-color: rgba(240,240,240,0.9);
	color: #333333;
	padding: 22px;
	border: 2px solid #333333;
	border-radius: 8px;
    max-width: 75%;
    margin: 42px auto;
}

.wp-post-modal.show button.close-modal {
	display: none !important;
}

div#feedback-form p {
	padding: 22px 0;
}

#modal-ready {
}

.close-modal {
	border-radius: 8px;
	width: 0px;
    height: 0px;
    padding: 0;
    margin: 0px;
}

#custfdbklnk {
	padding: 8px;
	border: 2px solid #cccccc;
	border-radius: 6px;
	background-color: rgba(240,240,240,0.9);
}